@nuxt/test-utils vs @vue/test-utils?

It would be really good to know why using @nuxt/test-utils is more beneficial than using @vue/test-utils in a Nuxt project. Despite the obvious point being this package is made specifically for Nuxt, @vue/test-utils still works perfectly well in Nuxt projects.

Could we get some comparison docs (a table maybe) of what @vue/test-utils can’t do for a Nuxt project, but @nuxt/test-utils can?

[mrazauskas]

These are two different tools. For the best result use them both.

If we talk about Nuxt apps, @nuxt/test-utils will build an app (or generate a website), launch a server and will provide a browser (all are optional). For example, @nuxt/test-utils might help to check if Nuxt routes, middleware, modules, etc work and if pages are rendered as expected. Public API: get(), url(), createPage(), getNuxt(), etc. Focus on routes, browsing and Nuxt instance, but not Vue components.

We have @vue/test-utils to test Vue components (or Vue app). Public API: mount(), shallowMount(), render(), renderToString(), etc. @vue/test-utils does not build Nuxt apps and knows nothing about Nuxt instance.

(Some details might be missing, but this should help to catch general idea.)

[mrazauskas]

would nuxt/test-utils allow me to test if global errors (unhandled throw errors) that end up in nuxt’s global error handler are caught by the Sentry API module ?

@MentalGear as mentioned before, I don’t know how exactly Sentry works. Here are simply few thoughts which might help you to find a solution.

Your question made me curious to take look at sentry-module’s docs and test suite. A snipped bellow is adapted from examples found there. Docs mention clientIntegrations option. If I get it right, this options sets logErrors: true in dev. Make it log errors in test mode too and use page.on('console') and page.on('pageerror') methods of Playwright’s Page class.

import { setupTest, createPage, url } from '@nuxt/test-utils'

// inside a `describe()` block with `setupTest({ browser: true })`
test('all errors are handled', async () => {
  const page = await createPage() // 1. create Playwright's `page` object

  const messages = []
  page.on('console', (msg) => { // 2. add a listeners
    messages.push(msg.text())
  })

  const errors = []
  page.on('pageerror', (error) => {
    errors.push(error.message)
  })

  await page.goto(url('/some-path')) // 3. navigate

  expect(messages).toEqual(['some expected messages']) // 4. most probably Sentry logs will be here
  expect(errors).toEqual([]) // 5. uncaught errors
})