Nuxt 3: Configure Testing with Vitest

Installation

$ yarn add --dev @nuxt/test-utils-edge vitest

Setup

Create a test file in tests folder

// tests/example.spec.ts

import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'
import { setup, $fetch, isDev } from '@nuxt/test-utils-edge'

describe('example', async () => {
  await setup({
    rootDir: fileURLToPath(new URL('..', import.meta.url)),
    server: true
  })

  it('Renders Hello Nuxt', async () => {
    expect(await $fetch('/')).toMatch('Hello Nuxt!')
  })

  if (isDev()) {
    it('[dev] ensure vite client script is added', async () => {
      expect(await $fetch('/')).toMatch('/_nuxt/@vite/client"')
    })
  }
})

Add support for @nuxt/test-utils-edge in vitest.config.ts

// vite.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    deps: {
      inline: [/@nuxt\/test-utils-edge/],
    },
  },
})

Run

Start the test

# before running the test make sure you have .nuxt folder
$ yarn run dev

# this will watch the test
$ yarn vitest
$ yarn nuxi test --watch

# this will run the test one time only
$ yarn vitest --run
$ yarn nuxi test