fix(module): apply vitest setup only when loaded from vitest config

examples/app-vitest-co-location/.nuxtignore

@@ -0,0 +1 @@
+**/__tests__/**/*

examples/app-vitest-co-location/app/app.config.ts

@@ -0,0 +1,3 @@
+export default defineAppConfig({
+  foo: 'bar',
+})

examples/app-vitest-co-location/app/components/Message.nuxt.spec.ts

@@ -0,0 +1,12 @@
+import { it, expect, vi } from 'vitest'
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
+
+import Message from './Message.vue'
+
+mockNuxtImport(useMessage, vi.fn)
+
+it('should mount', async () => {
+  vi.mocked(useMessage).mockImplementationOnce(() => 'Mocked!')
+  const wrapper = await mountSuspended(Message)
+  expect(wrapper.text()).toContain('Mocked!')
+})

examples/app-vitest-co-location/app/components/Message.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const message = useMessage()
+</script>
+
+<template>
+  <h1>{{ message }}</h1>
+</template>

examples/app-vitest-co-location/app/components/__tests__/Message.browser.spec.ts

@@ -0,0 +1,10 @@
+import { it, expect } from 'vitest'
+import { render } from '@nuxt/test-utils/browser'
+
+import { Message } from '#components'
+
+it('should render', async () => {
+  const screen = await render(Message)
+  const message = screen.getByRole('heading')
+  await expect.element(message).toMatchTextContent(/Hello Nuxt/)
+})

examples/app-vitest-co-location/app/components/__tests__/Message.nuxt.spec.ts

@@ -0,0 +1,9 @@
+import { it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+
+import { Message } from '#components'
+
+it('should mount with import from alias', async () => {
+  const wrapper = await mountSuspended(Message)
+  expect(wrapper.text()).toContain('Hello Nuxt')
+})

examples/app-vitest-co-location/app/composables/useMessage.nuxt.spec.ts

@@ -0,0 +1,8 @@
+import { it, expect } from 'vitest'
+import { useMessage } from './useMessage'
+
+it('useMessage', () => {
+  expect(useMessage()).toBe('Hello Nuxt')
+})
+
+export function useMessageSpec() {}

examples/app-vitest-co-location/app/composables/useMessage.ts

@@ -0,0 +1,3 @@
+export function useMessage() {
+  return 'Hello Nuxt'
+}

examples/app-vitest-co-location/app/middleware/logger.global.nuxt.spec.ts

@@ -0,0 +1,11 @@
+import { it, expect, vi } from 'vitest'
+import middleware from './logger.global'
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+
+mockNuxtImport(useRoute, vi.fn)
+
+it('middleware', () => {
+  const spy = vi.spyOn(console, 'log')
+  expect(middleware(useRoute(), useRoute())).toBeUndefined()
+  expect(spy).toHaveBeenCalledExactlyOnceWith('/', '/')
+})

examples/app-vitest-co-location/app/middleware/logger.global.ts

@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  console.log(to.path, from.path)
+})

examples/app-vitest-co-location/app/pages/__tests__/index.nuxt.spec.ts

@@ -0,0 +1,11 @@
+import { it, expect, vi } from 'vitest'
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
+
+import Page from '../index.vue'
+
+mockNuxtImport(useAppConfig, vi.fn)
+
+it('should mount', async () => {
+  const wrapper = await mountSuspended(Page)
+  expect(wrapper.text()).toContain('Index Page')
+})

examples/app-vitest-co-location/app/pages/about.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>About Page</h1>
+    <NuxtPage />
+  </div>
+</template>

examples/app-vitest-co-location/app/pages/about/index.nuxt.spec.ts

@@ -0,0 +1,11 @@
+import { it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { NuxtPage } from '#components'
+
+it('should mount child page', async () => {
+  const wrapper = await mountSuspended(NuxtPage, {
+    route: '/about',
+  })
+  expect(wrapper.text()).toContain('About Page')
+  expect(wrapper.text()).toContain('About Index')
+})

examples/app-vitest-co-location/app/pages/about/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>About Index</h1>
+  </div>
+</template>

examples/app-vitest-co-location/app/pages/index.e2e.spec.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url'
+import { it, expect } from 'vitest'
+import { createPage, setup } from '@nuxt/test-utils/e2e'
+
+await setup({
+  rootDir: fileURLToPath(new URL('../../', import.meta.url)),
+  browser: true,
+})
+
+it('runs e2e browser test', { timeout: 20000 }, async ({ onTestFinished }) => {
+  const page = await createPage('/')
+  onTestFinished(() => page.close())
+
+  const title = page.getByRole('heading', { level: 1 })
+  await expect(title.textContent()).resolves.toContain('Index Page')
+
+  const paragraph = page.locator('#app-config')
+  await expect(paragraph.textContent()).resolves.toContain('foo: bar')
+})

examples/app-vitest-co-location/app/pages/index.nuxt.spec.ts

@@ -0,0 +1,41 @@
+import { it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { TestCollectScans } from '~~/modules/collect-scans.ts'
+
+import Page from './index.vue'
+
+it('should mount page', async () => {
+  const wrapper = await mountSuspended(Page)
+  const title = wrapper.find('h1')
+  expect(title.text()).toContain('Index Page')
+
+  const appConfig = wrapper.find('#app-config')
+  expect(appConfig.text()).toContain('foo: bar')
+})
+
+it('should ignore plugins and middlewares', async () => {
+  const wrapper = await mountSuspended(Page)
+  const scans: TestCollectScans = JSON.parse(wrapper.find('#scans').text())
+
+  expect(scans).toEqual({
+    pages: [
+      'app/pages/about.vue',
+      'app/pages/about/index.vue',
+      'app/pages/index.vue',
+    ],
+    imports: [
+      'app/composables/useMessage.ts',
+    ],
+    components: [
+      'app/components/Message.vue',
+    ],
+    plugins: [
+      'app/plugins/message.ts',
+    ],
+    middlewares: [
+      'app/middleware/logger.global.ts',
+    ],
+    // empty because client environment
+    serverHandlers: [],
+  })
+})

examples/app-vitest-co-location/app/pages/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import scans from '#build/test-collect-scans.mjs'
+
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div>
+    <h1>Index Page</h1>
+    <p id="app-config">
+      foo: {{ appConfig.foo }}
+    </p>
+    <p id="scans">
+      {{ scans }}
+    </p>
+  </div>
+</template>

examples/app-vitest-co-location/app/plugins/message.nuxt.test.ts

@@ -0,0 +1,13 @@
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+import { it, expect, vi } from 'vitest'
+
+mockNuxtImport(useMessage, vi.fn)
+
+it('plugin', () => {
+  expect(useNuxtApp().$message()).toEqual('Hello Nuxt (/)')
+})
+
+it('plugin mock', () => {
+  vi.mocked(useMessage).mockImplementationOnce(() => 'Mocked!')
+  expect(useNuxtApp().$message()).toEqual('Mocked! (/)')
+})

examples/app-vitest-co-location/app/plugins/message.ts

@@ -0,0 +1,9 @@
+export default defineNuxtPlugin((nuxt) => {
+  return {
+    provide: {
+      message() {
+        return `${useMessage()} (${nuxt.$router.currentRoute.value.path})`
+      },
+    },
+  }
+})

examples/app-vitest-co-location/modules/collect-scans.ts

@@ -0,0 +1,71 @@
+import { relative } from 'pathe'
+import { defineNuxtModule, addTemplate, addServerTemplate } from '@nuxt/kit'
+
+export type TestCollectScans = ReturnType<typeof createScans>
+
+function createScans() {
+  return {
+    pages: [] as string[],
+    imports: [] as string[],
+    components: [] as string[],
+    plugins: [] as string[],
+    middlewares: [] as string[],
+    serverHandlers: [] as string[],
+  }
+}
+
+export default defineNuxtModule({
+  meta: {
+    name: 'test-collect-scans',
+  },
+  setup(_, nuxt) {
+    const rootDir = nuxt.options.rootDir
+
+    const normalize = (paths: (string | undefined)[]) => paths
+      .filter(p => p !== undefined)
+      .map(p => relative(rootDir, p))
+      .filter(p => !p.includes('node_modules/') && !p.includes('../') && !p.includes('.nuxt/'))
+      .toSorted()
+
+    const scans = createScans()
+
+    addTemplate({
+      filename: 'test-collect-scans.mjs',
+      getContents: () => `export default ${JSON.stringify(scans)};`,
+    })
+
+    addServerTemplate({
+      filename: '#test-collect-scans/scans.mjs',
+      getContents: () => `export default ${JSON.stringify(scans)};`,
+    })
+
+    nuxt.addHooks({
+      'pages:extend'(_pages) {
+        const getPaths = (pages: typeof _pages, paths: string[] = []) => {
+          for (const p of pages) {
+            if (p.file) {
+              paths.push(p.file)
+            }
+            getPaths(p.children ?? [], paths)
+          }
+          return paths
+        }
+
+        scans.pages = normalize(getPaths(_pages))
+      },
+      'imports:extend'(imports) {
+        scans.imports = normalize(imports.map(p => p.from))
+      },
+      'components:extend'(components) {
+        scans.components = normalize(components.map(p => p.filePath))
+      },
+      'app:resolve': (app) => {
+        scans.plugins = normalize(app.plugins.map(p => p.src))
+        scans.middlewares = normalize(app.middleware.map(p => p.path))
+      },
+      'nitro:build:before'(nitro) {
+        scans.serverHandlers = normalize(nitro.scannedHandlers.map(p => p.handler))
+      },
+    })
+  },
+})

examples/app-vitest-co-location/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxt/test-utils/module'],
+  devtools: { enabled: true },
+  compatibilityDate: '2024-04-03',
+})

examples/app-vitest-co-location/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "example-app-vitest-co-location",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "nuxt": "^4.5.2"
+  },
+  "devDependencies": {
+    "@nuxt/test-utils": "latest",
+    "@vitest/browser-playwright": "5.0.2",
+    "@vue/test-utils": "2.5.1",
+    "happy-dom": "20.14.5",
+    "playwright-core": "1.63.0",
+    "typescript": "6.0.3",
+    "vitest": "5.0.2"
+  }
+}

examples/app-vitest-co-location/server/api/collect-scans.ts

@@ -0,0 +1,6 @@
+import { defineEventHandler } from 'h3'
+
+// @ts-expect-error vertual file
+import scans from '#test-collect-scans/scans.mjs'
+
+export default defineEventHandler(() => scans)

examples/app-vitest-co-location/server/api/hello.get.e2e.spec.ts

@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url'
+import { it, expect } from 'vitest'
+import { setup, $fetch } from '@nuxt/test-utils/e2e'
+
+await setup({
+  rootDir: fileURLToPath(new URL('../../', import.meta.url)),
+})
+
+it('runs e2e api test', { timeout: 20000 }, async () => {
+  const res = await $fetch('/api/hello', { query: { name: 'Nuxt' } })
+  expect(res).toMatchObject({ message: 'Hello Nuxt!' })
+})

examples/app-vitest-co-location/server/api/hello.get.ts

@@ -0,0 +1,6 @@
+import { defineEventHandler, getQuery } from 'h3'
+
+export default defineEventHandler((event) => {
+  const name = getQuery(event).name
+  return { message: `Hello ${name}!` }
+})

examples/app-vitest-co-location/server/api/hello.get.unit.spec.ts

@@ -0,0 +1,10 @@
+import { it, expect } from 'vitest'
+import { createApp, toWebHandler } from 'h3'
+import handler from './hello.get'
+
+it('/api/hello', async () => {
+  const api = toWebHandler(createApp().use('/', handler))
+  const req = new Request(new URL('http://localhost/?name=Nuxt'))
+  const res = await api(req).then(r => r.json())
+  expect(res).toEqual({ message: 'Hello Nuxt!' })
+})

examples/app-vitest-co-location/test/nuxt/mount.nuxt.spec.ts

@@ -0,0 +1,12 @@
+import { it, expect, vi } from 'vitest'
+import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
+
+import { Message } from '#components'
+
+mockNuxtImport(useMessage, vi.fn)
+
+it('should mount', async () => {
+  vi.mocked(useMessage).mockImplementationOnce(() => 'Mocked!')
+  const wrapper = await mountSuspended(Message)
+  expect(wrapper.text()).toContain('Mocked!')
+})