chore: update vitest dependencies (#24659)

.github/workflows/autofix.yml

@@ -32,6 +32,9 @@ jobs:
       - name: Test (unit)
         run: pnpm test:unit -u
 
+      - name: Test (runtime unit)
+        run: pnpm test:runtime -u
+
       - name: Run build
         run: pnpm build
 

.github/workflows/ci.yml

@@ -158,6 +158,33 @@ jobs:
       - name: Lint
         run: pnpm lint
 
+  test-unit:
+    # autofix workflow will be triggered instead for PRs
+    if: github.event_name == 'push'
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    needs:
+      - build
+    steps:
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+      - run: corepack enable
+      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4.0.0
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build (stub)
+        run: pnpm build:stub
+
+      - name: Test (unit)
+        run: pnpm test:unit
+
+      - name: Test (runtime unit)
+        run: pnpm test:runtime
+
   test-fixtures:
     runs-on: ${{ matrix.os }}
     needs:
@@ -223,12 +250,6 @@ jobs:
           name: dist
           path: packages
 
-      - name: Test (unit)
-        run: pnpm test:unit
-
-      - name: Test (runtime unit)
-        run: pnpm test:runtime
-
       - name: Test (fixtures)
         run: pnpm test:fixtures
         env:

package.json

@@ -32,6 +32,7 @@
   "resolutions": {
     "@nuxt/kit": "workspace:*",
     "@nuxt/schema": "workspace:*",
+    "@nuxt/test-utils": "3.9.0-alpha.1",
     "@nuxt/vite-builder": "workspace:*",
     "@nuxt/webpack-builder": "workspace:*",
     "nuxt": "workspace:*",
@@ -41,12 +42,13 @@
   },
   "devDependencies": {
     "@nuxt/eslint-config": "0.2.0",
-    "@nuxt/test-utils": "3.8.1",
+    "@nuxt/test-utils": "3.9.0-alpha.1",
     "@nuxt/webpack-builder": "workspace:*",
     "@types/fs-extra": "11.0.4",
     "@types/node": "20.10.4",
     "@types/semver": "7.5.6",
-    "@vitest/coverage-v8": "0.33.0",
+    "@vitest/coverage-v8": "1.0.2",
+    "@vue/test-utils": "^2.4.3",
     "case-police": "0.6.1",
     "changelogen": "0.5.5",
     "consola": "3.2.3",
@@ -66,7 +68,6 @@
     "nitropack": "2.8.1",
     "nuxi": "3.10.0",
     "nuxt": "workspace:*",
-    "nuxt-vitest": "0.11.5",
     "ofetch": "1.3.3",
     "pathe": "1.1.1",
     "playwright-core": "1.40.1",
@@ -75,9 +76,8 @@
     "std-env": "3.6.0",
     "typescript": "5.3.3",
     "ufo": "1.3.2",
-    "vite": "5.0.7",
+    "vitest": "1.0.2",
-    "vitest": "0.33.0",
+    "vitest-environment-nuxt": "1.0.0-alpha.1",
-    "vitest-environment-nuxt": "0.11.5",
     "vue": "3.3.11",
     "vue-eslint-parser": "9.3.2",
     "vue-router": "4.2.5",

packages/kit/package.json

@@ -53,7 +53,7 @@
     "nitropack": "2.8.1",
     "unbuild": "latest",
     "vite": "5.0.7",
-    "vitest": "0.33.0",
+    "vitest": "1.0.2",
     "webpack": "5.89.0"
   },
   "engines": {

packages/nuxt/package.json

@@ -121,7 +121,7 @@
     "@vitejs/plugin-vue": "4.5.2",
     "unbuild": "latest",
     "vite": "5.0.7",
-    "vitest": "0.33.0"
+    "vitest": "1.0.2"
   },
   "peerDependencies": {
     "@parcel/watcher": "^2.1.0",

packages/nuxt/test/auto-imports.test.ts

@@ -44,7 +44,7 @@ describe('imports:transform', () => {
     const result = await transform('// import { computed } from "foo"\n;const a = computed(0)')
     expect(result).toMatchInlineSnapshot(`
       "import { computed } from 'bar';
-      // import { computed } from \\"foo\\"
+      // import { computed } from "foo"
       ;const a = computed(0)"
     `)
   })

packages/nuxt/test/devonly.test.ts

@@ -73,7 +73,7 @@ describe('test devonly transform ', () => {
     expect(result).toMatchInlineSnapshot(`
       "<template>
           
-              <div class=\\"red\\">This should also be red.</div>
+              <div class="red">This should also be red.</div>
             
         </template>
         "

packages/nuxt/test/islandTransform.test.ts

@@ -49,13 +49,13 @@ describe('islandTransform - server and island components', () => {
       expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
         "<template>
               <div>
-                <div style=\\"display: contents;\\" nuxt-ssr-slot-name=\\"default\\" />
+                <div style="display: contents;" nuxt-ssr-slot-name="default" />
 
-                <div style=\\"display: contents;\\" nuxt-ssr-slot-name=\\"named\\" :nuxt-ssr-slot-data=\\"JSON.stringify([{ some-data: someData }])\\"/>
+                <div style="display: contents;" nuxt-ssr-slot-name="named" :nuxt-ssr-slot-data="JSON.stringify([{ some-data: someData }])"/>
-                <div style=\\"display: contents;\\" nuxt-ssr-slot-name=\\"other\\" :nuxt-ssr-slot-data=\\"JSON.stringify([{ some-data: someData }])\\"/>
+                <div style="display: contents;" nuxt-ssr-slot-name="other" :nuxt-ssr-slot-data="JSON.stringify([{ some-data: someData }])"/>
               </div>
               </template>
-              <script setup lang=\\"ts\\">
+              <script setup lang="ts">
         import { vforToArray as __vforToArray } from '#app/components/utils'
               const someData = 'some data'
 
@@ -80,12 +80,12 @@ describe('islandTransform - server and island components', () => {
       expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
         "<template>
               <div>
-                <div style=\\"display: contents;\\" nuxt-ssr-slot-name=\\"default\\" :nuxt-ssr-slot-data=\\"JSON.stringify([{ some-data: someData }])\\"><div nuxt-slot-fallback-start=\\"default\\"/><div  style=\\"display: contents;\\">
+                <div style="display: contents;" nuxt-ssr-slot-name="default" :nuxt-ssr-slot-data="JSON.stringify([{ some-data: someData }])"><div nuxt-slot-fallback-start="default"/><div  style="display: contents;">
                   <div>fallback</div>
                 </div><div nuxt-slot-fallback-end/></div>
               </div>
               </template>
-              <script setup lang=\\"ts\\">
+              <script setup lang="ts">
         import { vforToArray as __vforToArray } from '#app/components/utils'
               const someData = 'some data'
 
@@ -137,7 +137,7 @@ describe('islandTransform - server and island components', () => {
                     <p>message: {{ message }}</p>
                     <p>Below is the slot I want to be hydrated on the client</p>
                     <div>
-                      <div style=\\"display: contents;\\" nuxt-ssr-slot-name=\\"default\\" ><div nuxt-slot-fallback-start=\\"default\\"/>
+                      <div style="display: contents;" nuxt-ssr-slot-name="default" ><div nuxt-slot-fallback-start="default"/>
                         This is the default content of the slot, I should not see this after
                         the client loading has completed.
                       <div nuxt-slot-fallback-end/></div>
@@ -148,14 +148,14 @@ describe('islandTransform - server and island components', () => {
               </div>
             </template>
 
-            <script setup lang=\\"ts\\">
+            <script setup lang="ts">
         import { vforToArray as __vforToArray } from '#app/components/utils'
             export interface Props {
               count?: number;
             }
             const props = withDefaults(defineProps<Props>(), { count: 0 });
 
-            const message = \\"Hello World\\";
+            const message = "Hello World";
             </script>
             "
       `)

packages/vite/package.json

@@ -61,8 +61,8 @@
     "strip-literal": "^1.3.0",
     "ufo": "^1.3.2",
     "unplugin": "^1.5.1",
-    "vite": "^5.0.7",
+    "vite": "5.0.7",
-    "vite-node": "^0.33.0",
+    "vite-node": "^1.0.2",
     "vite-plugin-checker": "^0.6.2",
     "vue-bundle-renderer": "^2.0.0"
   },

test/basic.test.ts

@@ -4,8 +4,7 @@ import { describe, expect, it } from 'vitest'
 import { joinURL, withQuery } from 'ufo'
 import { isCI, isWindows } from 'std-env'
 import { join, normalize } from 'pathe'
-import { $fetch, createPage, fetch, isDev, setup, startServer, url, useTestContext } from '@nuxt/test-utils'
+import { $fetch, createPage, fetch, isDev, setup, startServer, url, useTestContext } from '@nuxt/test-utils/e2e'
-// @ts-expect-error subpath export needs to be fixed upstream
 import { $fetchComponent } from '@nuxt/test-utils/experimental'
 
 import type { NuxtIslandResponse } from '../packages/nuxt/src/core/runtime/nitro/renderer'
@@ -732,7 +731,7 @@ describe('navigate', () => {
     const res = await fetch('/navigate-some-path/', { redirect: 'manual', headers: { 'trailing-slash': 'true' } })
     expect(res.headers.get('location')).toEqual('/navigate-some-path')
     expect(res.status).toEqual(307)
-    expect(await res.text()).toMatchInlineSnapshot('"<!DOCTYPE html><html><head><meta http-equiv=\\"refresh\\" content=\\"0; url=/navigate-some-path\\"></head></html>"')
+    expect(await res.text()).toMatchInlineSnapshot(`"<!DOCTYPE html><html><head><meta http-equiv="refresh" content="0; url=/navigate-some-path"></head></html>"`)
   })
 
   it('should not overwrite headers', async () => {
@@ -814,17 +813,17 @@ describe('errors', () => {
         "url": "/__nuxt_error",
       }
     `)
+  })
 
-    it('should not recursively throw an error when there is an error rendering the error page', async () => {
+  it('should not recursively throw an error when there is an error rendering the error page', async () => {
-      const res = await $fetch('/', {
+    const res = await $fetch('/', {
-        headers: {
+      headers: {
-          'x-test-recurse-error': 'true',
+        'x-test-recurse-error': 'true',
-          accept: 'text/html'
+        accept: 'text/html'
-        }
+      }
-      })
-      expect(typeof res).toBe('string')
-      expect(res).toContain('Hello Nuxt 3!')
     })
+    expect(typeof res).toBe('string')
+    expect(res).toContain('Hello Nuxt 3!')
   })
 
   // TODO: need to create test for webpack
@@ -1418,7 +1417,7 @@ describe.skipIf(isDev() || isWebpack)('inlining component styles', () => {
     const html: string = await $fetch('/styles')
     expect(html.match(/<link [^>]*href="[^"]*\.css">/g)?.filter(m => m.includes('entry'))?.map(m => m.replace(/\.[^.]*\.css/, '.css'))).toMatchInlineSnapshot(`
       [
-        "<link rel=\\"stylesheet\\" href=\\"/_nuxt/entry.css\\">",
+        "<link rel="stylesheet" href="/_nuxt/entry.css">",
       ]
     `)
   })
@@ -1475,7 +1474,7 @@ describe('server components/islands', () => {
     await page.getByText('Go to page with lazy server component').click()
 
     const text = await page.innerText('pre')
-    expect(text).toMatchInlineSnapshot('" End page <pre></pre><section id=\\"fallback\\"> Loading server component </section><section id=\\"no-fallback\\"><div></div></section>"')
+    expect(text).toMatchInlineSnapshot(`" End page <pre></pre><section id="fallback"> Loading server component </section><section id="no-fallback"><div></div></section>"`)
     expect(text).not.toContain('async component that was very long')
     expect(text).toContain('Loading server component')
 
@@ -1494,7 +1493,7 @@ describe('server components/islands', () => {
     await page.getByText('Go to page without lazy server component').click()
 
     const text = await page.innerText('pre')
-    expect(text).toMatchInlineSnapshot('" End page <pre></pre><section id=\\"fallback\\"><div nuxt-ssr-component-uid=\\"2\\"> This is a .server (20ms) async component that was very long ... <div id=\\"async-server-component-count\\">42</div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div></div></section><section id=\\"no-fallback\\"><div nuxt-ssr-component-uid=\\"3\\"> This is a .server (20ms) async component that was very long ... <div id=\\"async-server-component-count\\">42</div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div></div></section>"')
+    expect(text).toMatchInlineSnapshot(`" End page <pre></pre><section id="fallback"><div nuxt-ssr-component-uid="2"> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">42</div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div></section><section id="no-fallback"><div nuxt-ssr-component-uid="3"> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">42</div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div></section>"`)
     expect(text).toContain('async component that was very long')
 
     // Wait for all pending micro ticks to be cleared
@@ -1737,7 +1736,7 @@ describe('component islands', () => {
           "link": [],
           "style": [],
         },
-        "html": "<div nuxt-ssr-component-uid><div> count is above 2 </div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div> that was very long ... <div id=\\"long-async-component-count\\">3</div>  <div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"test\\" nuxt-ssr-slot-data=\\"[{&quot;count&quot;:3}]\\"></div><p>hello world !!!</p><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"hello\\" nuxt-ssr-slot-data=\\"[{&quot;t&quot;:0},{&quot;t&quot;:1},{&quot;t&quot;:2}]\\"><div nuxt-slot-fallback-start=\\"hello\\"></div><!--[--><div style=\\"display:contents;\\"><div> fallback slot -- index: 0</div></div><div style=\\"display:contents;\\"><div> fallback slot -- index: 1</div></div><div style=\\"display:contents;\\"><div> fallback slot -- index: 2</div></div><!--]--><div nuxt-slot-fallback-end></div></div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"fallback\\" nuxt-ssr-slot-data=\\"[{&quot;t&quot;:&quot;fall&quot;},{&quot;t&quot;:&quot;back&quot;}]\\"><div nuxt-slot-fallback-start=\\"fallback\\"></div><!--[--><div style=\\"display:contents;\\"><div>fall slot -- index: 0</div><div class=\\"fallback-slot-content\\"> wonderful fallback </div></div><div style=\\"display:contents;\\"><div>back slot -- index: 1</div><div class=\\"fallback-slot-content\\"> wonderful fallback </div></div><!--]--><div nuxt-slot-fallback-end></div></div></div>",
+        "html": "<div nuxt-ssr-component-uid><div> count is above 2 </div><div style="display:contents;" nuxt-ssr-slot-name="default"></div> that was very long ... <div id="long-async-component-count">3</div>  <div style="display:contents;" nuxt-ssr-slot-name="test" nuxt-ssr-slot-data="[{&quot;count&quot;:3}]"></div><p>hello world !!!</p><div style="display:contents;" nuxt-ssr-slot-name="hello" nuxt-ssr-slot-data="[{&quot;t&quot;:0},{&quot;t&quot;:1},{&quot;t&quot;:2}]"><div nuxt-slot-fallback-start="hello"></div><!--[--><div style="display:contents;"><div> fallback slot -- index: 0</div></div><div style="display:contents;"><div> fallback slot -- index: 1</div></div><div style="display:contents;"><div> fallback slot -- index: 2</div></div><!--]--><div nuxt-slot-fallback-end></div></div><div style="display:contents;" nuxt-ssr-slot-name="fallback" nuxt-ssr-slot-data="[{&quot;t&quot;:&quot;fall&quot;},{&quot;t&quot;:&quot;back&quot;}]"><div nuxt-slot-fallback-start="fallback"></div><!--[--><div style="display:contents;"><div>fall slot -- index: 0</div><div class="fallback-slot-content"> wonderful fallback </div></div><div style="display:contents;"><div>back slot -- index: 1</div><div class="fallback-slot-content"> wonderful fallback </div></div><!--]--><div nuxt-slot-fallback-end></div></div></div>",
         "state": {},
       }
     `)
@@ -1758,7 +1757,7 @@ describe('component islands', () => {
           "link": [],
           "style": [],
         },
-        "html": "<div nuxt-ssr-component-uid> This is a .server (20ms) async component that was very long ... <div id=\\"async-server-component-count\\">2</div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div></div>",
+        "html": "<div nuxt-ssr-component-uid> This is a .server (20ms) async component that was very long ... <div id="async-server-component-count">2</div><div style="display:contents;" nuxt-ssr-slot-name="default"></div></div>",
         "state": {},
       }
     `)

test/fixtures/basic-types/package.json

@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "ofetch": "latest",
-    "vitest": "0.33.0",
+    "vitest": "1.0.2",
     "vue-router": "latest",
     "vue": "latest"
   }

test/hmr.test.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
 import { isWindows } from 'std-env'
 import { join } from 'pathe'
-import { $fetch, fetch, setup } from '@nuxt/test-utils'
+import { $fetch, fetch, setup } from '@nuxt/test-utils/e2e'
 
 import { expectWithPolling, renderPage } from './utils'
 

test/nuxt/composables.test.ts

@@ -3,7 +3,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { defineEventHandler } from 'h3'
 
-import { mountSuspended, registerEndpoint } from 'nuxt-vitest/utils'
+import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
 
 import * as composables from '#app/composables'
 
@@ -312,9 +312,10 @@ describe('errors', () => {
 })
 
 describe('onNuxtReady', () => {
-  it('should call callback immediately once nuxt is hydrated', () => {
+  it('should call callback once nuxt is hydrated', async () => {
     const fn = vi.fn()
     onNuxtReady(fn)
+    await new Promise(resolve => setTimeout(resolve, 1))
     expect(fn).toHaveBeenCalled()
   })
 })
@@ -463,7 +464,7 @@ describe.skipIf(process.env.TEST_MANIFEST === 'manifest-off')('app manifests', (
 
 describe('routing utilities: `navigateTo`', () => {
   it('navigateTo should disallow navigation to external URLs by default', () => {
-    expect(() => navigateTo('https://test.com')).toThrowErrorMatchingInlineSnapshot('"Navigating to an external URL is not allowed by default. Use `navigateTo(url, { external: true })`."')
+    expect(() => navigateTo('https://test.com')).toThrowErrorMatchingInlineSnapshot(`[Error: Navigating to an external URL is not allowed by default. Use \`navigateTo(url, { external: true })\`.]`)
     expect(() => navigateTo('https://test.com', { external: true })).not.toThrow()
   })
   it('navigateTo should disallow navigation to data/script URLs', () => {
@@ -497,7 +498,7 @@ describe('routing utilities: `useRoute`', () => {
 describe('routing utilities: `abortNavigation`', () => {
   it('should throw an error if one is provided', () => {
     const error = useError()
-    expect(() => abortNavigation({ message: 'Page not found' })).toThrowErrorMatchingInlineSnapshot('"Page not found"')
+    expect(() => abortNavigation({ message: 'Page not found' })).toThrowErrorMatchingInlineSnapshot(`[Error: Page not found]`)
     expect(error.value).toBeFalsy()
   })
   it('should block navigation if no error is provided', () => {

test/nuxt/nuxt-island.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 import { h } from 'vue'
-import { mountSuspended } from 'nuxt-vitest/utils'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { createServerComponent } from '../../packages/nuxt/src/components/runtime/server-component'
 import { createSimpleRemoteIslandProvider } from '../fixtures/remote-provider'
 import NuxtIsland from '../../packages/nuxt/src/app/components/nuxt-island'

test/runtime-compiler.test.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import { describe, expect, it } from 'vitest'
-import { $fetch, setup } from '@nuxt/test-utils'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
 import { isWindows } from 'std-env'
 import { expectNoClientErrors, renderPage } from './utils'
 const isWebpack = process.env.TEST_BUILDER === 'webpack'

test/utils.ts

@@ -4,7 +4,7 @@ import type { Page } from 'playwright-core'
 import { parse } from 'devalue'
 import { reactive, ref, shallowReactive, shallowRef } from 'vue'
 import { createError } from 'h3'
-import { getBrowser, url, useTestContext } from '@nuxt/test-utils'
+import { getBrowser, url, useTestContext } from '@nuxt/test-utils/e2e'
 
 export const isRenderingJson = true
 

vitest.config.ts

@@ -1,6 +1,5 @@
 import { resolve } from 'node:path'
-import { defineConfig } from 'vite'
+import { configDefaults, defineConfig } from 'vitest/config'
-import { configDefaults, coverageConfigDefaults } from 'vitest/config'
 import { isWindows } from 'std-env'
 
 export default defineConfig({
@@ -19,13 +18,13 @@ export default defineConfig({
     globalSetup: './test/setup.ts',
     setupFiles: ['./test/setup-env.ts'],
     testTimeout: isWindows ? 60000 : 10000,
-    coverage: {
-      // TODO: remove when we upgrade to vitest 0.34.0: https://github.com/vitest-dev/vitest/pull/3794
-      exclude: [...coverageConfigDefaults.exclude, '**/virtual:nuxt:**'],
-    },
     // Excluded plugin because it should throw an error when accidentally loaded via Nuxt
-    exclude: [...configDefaults.exclude, '**/test/nuxt/**', '**/test.ts', '**/this-should-not-load.spec.js'],
+    exclude: [...configDefaults.exclude, 'nuxt/**', '**/test.ts', '**/this-should-not-load.spec.js'],
-    maxThreads: process.env.TEST_ENV === 'dev' ? 1 : undefined,
+    poolOptions: {
-    minThreads: process.env.TEST_ENV === 'dev' ? 1 : undefined
+      threads: {
+        maxThreads: process.env.TEST_ENV === 'dev' ? 1 : undefined,
+        minThreads: process.env.TEST_ENV === 'dev' ? 1 : undefined
+      }
+    }
   }
 })

vitest.nuxt.config.ts

@@ -1,18 +1,9 @@
-import { defineVitestConfig } from 'nuxt-vitest/config'
+import { defineVitestConfig } from '@nuxt/test-utils/config'
-import { coverageConfigDefaults } from 'vitest/config'
 
 export default defineVitestConfig({
-  // TODO: investigate
-  define: {
-    'import.meta.test': true
-  },
   test: {
     dir: './test/nuxt',
     environment: 'nuxt',
-    coverage: {
-      // TODO: remove when we upgrade to vitest 0.34.0: https://github.com/vitest-dev/vitest/pull/3794
-      exclude: [...coverageConfigDefaults.exclude, '**/virtual:nuxt:**'],
-    },
     environmentOptions: {
       nuxt: {
         overrides: {