tests: allow dev server overrides

packages/nuxi/src/commands/dev.ts

@@ -46,9 +46,14 @@ export default defineNuxtCommand({
 
     const { loadNuxt, loadNuxtConfig, buildNuxt } = await loadKit(rootDir)
 
+    console.log('overrides', ...(process.env.NUXT_CONFIG_OVERRIDES ? JSON.parse(process.env.NUXT_CONFIG_OVERRIDES) : {}))
     const config = await loadNuxtConfig({
       cwd: rootDir,
-      overrides: { dev: true }
+      overrides: {
+        dev: true,
+        // used for testing
+        ...(process.env.NUXT_CONFIG_OVERRIDES ? JSON.parse(process.env.NUXT_CONFIG_OVERRIDES) : {})
+      }
     })
 
     const listener = await listen(serverHandler, {

packages/test-utils/src/server.ts

@@ -9,28 +9,37 @@ import { useTestContext } from './context'
 // @ts-ignore type cast
 const kit: typeof _kit = _kit.default || _kit
 
-export async function startServer () {
+export async function startDevServer () {
   const ctx = useTestContext()
   await stopServer()
   const port = await getRandomPort()
-  ctx.url = 'http://127.0.0.1:' + port
-  if (ctx.options.dev) {
   const nuxiCLI = await kit.resolvePath('nuxi/cli')
   ctx.serverProcess = execa(nuxiCLI, ['dev'], {
     cwd: ctx.nuxt!.options.rootDir,
-      stdio: 'inherit',
     env: {
       ...process.env,
       PORT: String(port),
       NITRO_PORT: String(port),
-        NODE_ENV: 'development'
+      NODE_ENV: 'development',
+      NUXT_CONFIG_OVERRIDES: JSON.stringify(ctx.options.nuxtConfig)
     }
   })
+  // wait until the server process displays the listening path
+  ctx.url = await new Promise<string>(resolve => {
+    // @ts-expect-error untyoed
+    ctx.serverProcess.stdout?.on('data', (data: Buffer) => {
+      console.log(data.toString())
+      if (data.toString().includes('Local:')) {
+        console.log('resolving')
+        resolve(data.toString().split('Local:')[1].trim())
+      }
+    })
+  })
   await waitForPort(port, { retries: 32 })
   for (let i = 0; i < 50; i++) {
     await new Promise(resolve => setTimeout(resolve, 100))
     try {
-        const res = await $fetch(ctx.nuxt!.options.app.baseURL)
+      const res = await $fetch(ctx.url)
       if (!res.includes('__NUXT_LOADING__')) {
         return
       }
@@ -38,7 +47,14 @@ export async function startServer () {
   }
   ctx.serverProcess.kill()
   throw new Error('Timeout waiting for dev server!')
-  } else {
+}
+
+
+export async function startServer () {
+  const ctx = useTestContext()
+  await stopServer()
+  const port = await getRandomPort()
+  ctx.url = 'http://127.0.0.1:' + port
   ctx.serverProcess = execa('node', [
     resolve(ctx.nuxt!.options.nitro.output!.dir!, 'server/index.mjs')
   ], {
@@ -52,7 +68,6 @@ export async function startServer () {
   })
   await waitForPort(port, { retries: 8 })
 }
-}
 
 export async function stopServer () {
   const ctx = useTestContext()

packages/test-utils/src/setup/index.ts

@@ -1,6 +1,6 @@
 import { createTestContext, setTestContext } from '../context'
 import { loadFixture, buildFixture } from '../nuxt'
-import { startServer, stopServer } from '../server'
+import {startDevServer, startServer, stopServer} from '../server'
 import { createBrowser } from '../browser'
 import type { TestHooks, TestOptions } from '../types'
 import setupJest from './jest'
@@ -41,6 +41,9 @@ export function createTest (options: Partial<TestOptions>): TestHooks {
       await loadFixture()
     }
 
+    if (ctx.options.dev) {
+      await startDevServer()
+    } else {
       if (ctx.options.build) {
         await buildFixture()
       }
@@ -48,6 +51,7 @@ export function createTest (options: Partial<TestOptions>): TestHooks {
       if (ctx.options.server) {
         await startServer()
       }
+    }
 
     if (ctx.options.waitFor) {
       await (new Promise(resolve => setTimeout(resolve, ctx.options.waitFor)))

test/dev.test.ts

@@ -0,0 +1,28 @@
+import { fileURLToPath } from 'node:url'
+// eslint-disable-next-line import/order
+import { setup, $fetch } from '@nuxt/test-utils'
+import { describe, it, expect } from 'vitest'
+
+await setup({
+  rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
+  dev: true,
+  nuxtConfig: {
+    app: {
+      baseURL: '/test'
+    }
+  }
+})
+describe('dev tests', () => {
+  it('should just work', async () => {
+    expect(await $fetch('/')).toMatchInlineSnapshot(`
+      "<!DOCTYPE html>
+      <html >
+      <head><meta charset=\\"utf-8\\">
+      <meta name=\\"viewport\\" content=\\"width=1024, initial-scale=1\\">
+      <title>- Fixture</title><link rel=\\"preload\\" as=\\"style\\" href=\\"/_nuxt/assets/global.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"/_nuxt/virtual.css\\"><link rel=\\"preload\\" as=\\"style\\" href=\\"/_nuxt/assets/plugin.css\\"><link rel=\\"modulepreload\\" as=\\"script\\" crossorigin href=\\"/_nuxt/home/harlan/forks/nuxt3/packages/nuxt/src/app/entry.ts\\"><link rel=\\"stylesheet\\" href=\\"/_nuxt/assets/global.css\\"><link rel=\\"stylesheet\\" href=\\"/_nuxt/virtual.css\\"><link rel=\\"stylesheet\\" href=\\"/_nuxt/assets/plugin.css\\"></head>
+      <body ><div id=\\"__nuxt\\"><div><div>Extended layout from foo</div><div><h1>[...slug].vue</h1><div>catchall at    &gt; Network:  http:</div><div>Middleware ran: true</div></div></div></div><script>window.__NUXT__=(function(a){return {data:{hey:{foo:\\"bar\\",baz:\\"qux\\"}},state:{},_errors:{},serverRendered:true,config:{public:{ids:[1,2,3],needsFallback:a,testConfig:123},app:{baseURL:\\"\\\\u002F\\",buildAssetsDir:\\"\\\\u002F_nuxt\\\\u002F\\",cdnURL:a}},prerenderedAt:1678028804677}}(\\"\\"))</script><script type=\\"module\\" src=\\"/_nuxt/@vite/client\\" crossorigin></script><script type=\\"module\\" src=\\"/_nuxt/home/harlan/forks/nuxt3/packages/nuxt/src/app/entry.ts\\" crossorigin></script></body>
+      </html>"
+    `)
+  })
+})
+

test/fixtures/basic/pages/index.vue

@@ -5,6 +5,7 @@
     </Head>
     <h1>Hello Nuxt 3!</h1>
     <div>RuntimeConfig | testConfig: {{ config.testConfig }}</div>
+    <div>RuntimeConfig | baseURL: {{ config.baseURL }}</div>
     <div>Composable | foo: {{ foo }}</div>
     <div>Composable | bar: {{ bar }}</div>
     <div>Composable | template: {{ templateAutoImport }}</div>