feat(test-utils): test in development mode (#3753)

examples/with-test/tests/basic.test.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'url'
 import { describe, expect, it } from 'vitest'
-import { setup, $fetch } from '@nuxt/test-utils'
+import { setup, $fetch, isDev } from '@nuxt/test-utils'
 
 describe('example', async () => {
   await setup({
@@ -11,4 +11,10 @@ describe('example', async () => {
   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"')
+    })
+  }
 })

packages/nuxi/src/commands/test.ts

@@ -4,7 +4,7 @@ import { defineNuxtCommand } from './index'
 export default defineNuxtCommand({
   meta: {
     name: 'test',
-    usage: 'npx nuxi test',
+    usage: 'npx nuxi test [--dev] [--watch] [rootDir]',
     description: 'Run tests'
   },
   async invoke (args) {
@@ -12,7 +12,9 @@ export default defineNuxtCommand({
     const rootDir = resolve(args._[0] || '.')
     const { runTests } = await importTestUtils()
     await runTests({
-      rootDir
+      rootDir,
+      dev: !!args.dev,
+      watch: !!args.watch
     })
   }
 })

packages/test-utils/build.config.ts

@@ -10,6 +10,7 @@ export default defineBuildConfig({
   externals: [
     'vitest',
     'playwright',
-    'playwright-core'
+    'playwright-core',
+    'listhen'
   ]
 })

packages/test-utils/src/context.ts

@@ -10,6 +10,7 @@ export function createTestContext (options: Partial<TestOptions>): TestContext {
     fixture: 'fixture',
     configFile: 'nuxt.config',
     setupTimeout: 60000,
+    dev: !!JSON.parse(process.env.NUXT_TEST_DEV || 'false'),
     logLevel: 1,
     server: options.browser,
     build: options.browser || options.server,
@@ -35,3 +36,8 @@ export function setTestContext (context: TestContext): TestContext {
   currentContext = context
   return currentContext
 }
+
+export function isDev () {
+  const ctx = useTestContext()
+  return ctx.options.dev
+}

packages/test-utils/src/nuxt.ts

@@ -50,6 +50,7 @@ export async function loadFixture () {
 
   ctx.nuxt = await kit.loadNuxt({
     cwd: ctx.options.rootDir,
+    dev: ctx.options.dev,
     overrides: ctx.options.nuxtConfig,
     configFile: ctx.options.configFile
   })

packages/test-utils/src/run.ts

@@ -1,5 +1,7 @@
 export interface RunTestOptions {
   rootDir: string,
+  dev?: boolean,
+  watch?: boolean
   runner?: 'vitest'
 }
 
@@ -13,13 +15,19 @@ export async function runTests (opts: RunTestOptions) {
   if (opts.runner !== 'vitest') {
     throw new Error(`Unsupported runner: ${opts.runner}. Currently only vitest runner is supported.`)
   }
+
+  if (opts.dev) {
+    // Set default dev option for @nuxt/test-utils
+    process.env.NUXT_TEST_DEV = 'true'
+  }
+
   const { startVitest } = await import('vitest/dist/node.js')
   const succeeded = await startVitest(
     [] /* argv */,
     // Vitest options
     {
       root: opts.rootDir,
-      run: true
+      run: !opts.watch
     },
     // Vite options
     {

packages/test-utils/src/server.ts

@@ -9,10 +9,22 @@ export async function startServer () {
   await stopServer()
   const port = await getRandomPort()
   ctx.url = 'http://localhost:' + port
+  if (ctx.options.dev) {
+    ctx.listener = await ctx.nuxt.server.listen(port)
+    await waitForPort(port, { retries: 8 })
+    for (let i = 0; i < 50; i++) {
+      await new Promise(resolve => setTimeout(resolve, 100))
+      const res = await $fetch('/')
+      if (!res.includes('__NUXT_LOADING__')) {
+        return
+      }
+    }
+    throw new Error('Timeout waiting for dev server!')
+  } else {
     ctx.serverProcess = execa('node', [
-    // @ts-ignore
       resolve(ctx.nuxt.options.nitro.output.dir, 'server/index.mjs')
     ], {
+      stdio: 'inherit',
       env: {
         ...process.env,
         PORT: String(port),
@@ -21,12 +33,16 @@ export async function startServer () {
     })
     await waitForPort(port, { retries: 8 })
   }
+}
 
 export async function stopServer () {
   const ctx = useTestContext()
   if (ctx.serverProcess) {
     await ctx.serverProcess.kill()
   }
+  if (ctx.listener) {
+    await ctx.listener.close()
+  }
 }
 
 export function fetch (path: string, options?: any) {

packages/test-utils/src/types.ts

@@ -1,6 +1,7 @@
 import type { Nuxt, NuxtConfig } from '@nuxt/schema'
 import type { ExecaChildProcess } from 'execa'
 import type { Browser, LaunchOptions } from 'playwright'
+import type { Listener } from 'listhen'
 
 export type TestRunner = 'vitest' | 'jest'
 
@@ -12,6 +13,7 @@ export interface TestOptions {
   buildDir: string
   nuxtConfig: NuxtConfig
   build: boolean
+  dev: boolean
   setupTimeout: number
   waitFor: number
   browser: boolean
@@ -30,6 +32,7 @@ export interface TestContext {
   browser?: Browser
   url?: string
   serverProcess?: ExecaChildProcess
+  listener?: Listener
 }
 
 export interface TestHooks {