chore(ci): enable testing fixtures in development (#3755)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

.github/workflows/ci.yml

@@ -88,6 +88,11 @@ jobs:
       - name: Test (fixtures)
         run: yarn test:fixtures
 
+      - name: Test (fixtures with dev)
+        run: yarn test:fixtures:dev
+        env:
+          NODE_OPTIONS: --max-old-space-size=8192
+
   test-fixtures-webpack:
     runs-on: ${{ matrix.os }}
 

package.json

@@ -23,6 +23,7 @@
     "release": "yarn && yarn lint && FORCE_COLOR=1 lerna publish -m \"chore: release\" && yarn stub",
     "stub": "lerna run prepack -- --stub",
     "test:fixtures": "yarn nuxi prepare test/fixtures/basic && JITI_ESM_RESOLVE=1 vitest run --dir test",
+    "test:fixtures:dev": "NUXT_TEST_DEV=true yarn test:fixtures",
     "test:fixtures:webpack": "TEST_WITH_WEBPACK=1 yarn test:fixtures",
     "test:types": "yarn run nuxi prepare test/fixtures/basic && cd test/fixtures/basic && npx vue-tsc --noEmit",
     "test:unit": "JITI_ESM_RESOLVE=1 yarn vitest run --dir packages",

packages/test-utils/src/nuxt.ts

@@ -37,16 +37,18 @@ export async function loadFixture () {
 
   ctx.options.rootDir = resolveRootDir()
 
-  const randomId = Math.random().toString(36).substr(2, 8)
-  const buildDir = resolve(ctx.options.rootDir, '.nuxt', randomId)
-  Object.assign(ctx.options.nuxtConfig, {
-    buildDir,
-    nitro: {
-      output: {
-        dir: resolve(buildDir, 'output')
+  if (!ctx.options.dev) {
+    const randomId = Math.random().toString(36).slice(2, 8)
+    const buildDir = resolve(ctx.options.rootDir, '.nuxt', randomId)
+    Object.assign(ctx.options.nuxtConfig, {
+      buildDir,
+      nitro: {
+        output: {
+          dir: resolve(buildDir, 'output')
+        }
       }
-    }
-  })
+    })
+  }
 
   ctx.nuxt = await kit.loadNuxt({
     cwd: ctx.options.rootDir,

packages/test-utils/src/server.ts

@@ -10,14 +10,24 @@ export async function startServer () {
   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 })
+    ctx.serverProcess = execa('npx', ['nuxi', 'dev'], {
+      cwd: ctx.nuxt.options.rootDir,
+      stdio: 'inherit',
+      env: {
+        ...process.env,
+        PORT: String(port),
+        NODE_ENV: 'development'
+      }
+    })
+    await waitForPort(port, { retries: 16 })
     for (let i = 0; i < 50; i++) {
       await new Promise(resolve => setTimeout(resolve, 100))
-      const res = await $fetch('/')
-      if (!res.includes('__NUXT_LOADING__')) {
-        return
-      }
+      try {
+        const res = await $fetch('/')
+        if (!res.includes('__NUXT_LOADING__')) {
+          return
+        }
+      } catch {}
     }
     throw new Error('Timeout waiting for dev server!')
   } else {

test/basic.test.ts

@@ -147,7 +147,9 @@ describe('errors', () => {
       }
     })
     expect(res.status).toBe(500)
-    expect(await res.json()).toMatchInlineSnapshot(`
+    const error = await res.json()
+    delete error.stack
+    expect(error).toMatchInlineSnapshot(`
       {
         "message": "This is a custom error",
         "statusCode": 500,
@@ -302,6 +304,12 @@ describe('extends support', () => {
 })
 
 describe('dynamic paths', () => {
+  if (process.env.NUXT_TEST_DEV) {
+    // TODO:
+    it.todo('dynamic paths in dev')
+    return
+  }
+
   it('should work with no overrides', async () => {
     const html = await $fetch('/assets')
     for (const match of html.matchAll(/(href|src)="(.*?)"/g)) {
@@ -311,13 +319,15 @@ describe('dynamic paths', () => {
   })
 
   it('adds relative paths to CSS', async () => {
-    const html = await $fetch('/assets')
-    const urls = Array.from(html.matchAll(/(href|src)="(.*?)"/g)).map(m => m[2])
-    const cssURL = urls.find(u => /_nuxt\/entry.*\.css$/.test(u))
     if (process.env.TEST_WITH_WEBPACK) {
       // Webpack injects CSS differently
       return
     }
+
+    const html = await $fetch('/assets')
+    const urls = Array.from(html.matchAll(/(href|src)="(.*?)"/g)).map(m => m[2])
+    const cssURL = urls.find(u => /_nuxt\/entry.*\.css$/.test(u))
+    expect(cssURL).toBeDefined()
     const css = await $fetch(cssURL)
     const imageUrls = Array.from(css.matchAll(/url\(([^)]*)\)/g)).map(m => m[1].replace(/[-.][\w]{8}\./g, '.'))
     expect(imageUrls).toMatchInlineSnapshot(`

test/bridge.test.ts

@@ -32,7 +32,9 @@ describe('fixtures:bridge', async () => {
         }
       })
       expect(res.status).toBe(500)
-      expect(await res.json()).toMatchInlineSnapshot(`
+      const error = await res.json()
+      delete error.stack
+      expect(error).toMatchInlineSnapshot(`
       {
         "message": "This is a custom error",
         "statusCode": 500,
@@ -49,6 +51,11 @@ describe('fixtures:bridge', async () => {
   })
 
   describe('dynamic paths', () => {
+    if (process.env.NUXT_TEST_DEV) {
+      // TODO:
+      it.todo('dynamic paths in dev')
+      return
+    }
     if (process.env.TEST_WITH_WEBPACK) {
       // TODO:
       it.todo('work with webpack')

vitest.config.ts

@@ -8,5 +8,8 @@ export default defineConfig({
   },
   esbuild: {
     tsconfigRaw: '{}'
+  },
+  test: {
+    testTimeout: 10000
   }
 })