@nuxt/test-utils-nightly 4.0.0-1701501480.7490334 → 4.0.0-1702810232.fba662c

package/README.md

@@ -4,7 +4,7 @@
 
 ## Overview
 
-Nuxt offers first-class support for e2e and unit testing of your Nuxt applications. `@nuxt/test-utils` currently contains e2e test utilities allowing you to test your app in production/development environments, and [`nuxt-vitest`](https://github.com/danielroe/nuxt-vitest) is planned to be merged to provide unit testing capabilities.
+Nuxt offers first-class support for e2e and unit testing of your Nuxt applications.
 
 Nuxt Test Utils is currently powering [the tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test), as well as tests used throughout the module ecosystem.
 

package/dist/config.mjs

@@ -18,7 +18,7 @@ async function startNuxtAndGetViteConfig(rootDir = process.cwd(), overrides) {
   });
   if (!nuxt.options._installedModules.find((i) => i?.meta?.name === "@nuxt/test-utils")) {
     throw new Error(
-      "Failed to load nuxt-vitest module. You may need to add it to your nuxt.config."
+      "Failed to load `@nuxt/test-utils/module`. You may need to add it to your nuxt.config."
     );
   }
   const promise = new Promise((resolve, reject) => {
@@ -36,8 +36,11 @@ async function startNuxtAndGetViteConfig(rootDir = process.cwd(), overrides) {
   }).finally(() => nuxt.close());
   return promise;
 }
+const excludedPlugins = [
+  "nuxt:import-protection",
+  "vite-plugin-checker"
+];
 async function getVitestConfigFromNuxt(options, overrides) {
-  var _a;
   const { rootDir = process.cwd(), ..._overrides } = overrides || {};
   if (!options) {
     options = await startNuxtAndGetViteConfig(rootDir, {
@@ -45,10 +48,7 @@ async function getVitestConfigFromNuxt(options, overrides) {
       ..._overrides
     });
   }
-  (_a = options.viteConfig).plugins || (_a.plugins = []);
-  options.viteConfig.plugins = options.viteConfig.plugins?.filter(
-    (p) => p?.name !== "nuxt:import-protection"
-  );
+  options.viteConfig.plugins = (options.viteConfig.plugins || []).filter((p) => !excludedPlugins.includes(p?.name));
   const resolvedConfig = defu(
     // overrides
     {
@@ -69,20 +69,29 @@ async function getVitestConfigFromNuxt(options, overrides) {
           ["**/*.nuxt.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}", "nuxt"],
           ["{test,tests}/nuxt/**.*", "nuxt"]
         ],
+        server: {
+          deps: {
+            inline: [
+              // vite-node defaults
+              /\/node_modules\/(.*\/)?(nuxt|nuxt3|nuxt-nightly)\//,
+              /^#/,
+              // additional deps
+              "@nuxt/test-utils",
+              "@nuxt/test-utils-nightly",
+              "@nuxt/test-utils-edge",
+              "vitest-environment-nuxt",
+              ...options.nuxt.options.build.transpile.filter(
+                (r) => typeof r === "string" || r instanceof RegExp
+              )
+            ]
+          }
+        },
         deps: {
-          inline: [
-            // vite-node defaults
-            /\/node_modules\/(.*\/)?(nuxt|nuxt3|nuxt-nightly)\//,
-            /^#/,
-            // additional deps
-            "@nuxt/test-utils",
-            "@nuxt/test-utils-nightly",
-            "@nuxt/test-utils-edge",
-            "vitest-environment-nuxt",
-            ...options.nuxt.options.build.transpile.filter(
-              (r) => typeof r === "string" || r instanceof RegExp
-            )
-          ]
+          optimizer: {
+            web: {
+              enabled: false
+            }
+          }
         }
       }
     },
@@ -134,9 +143,12 @@ function defineVitestConfig(config = {}) {
       return config;
     const overrides = config.test?.environmentOptions?.nuxt?.overrides || {};
     overrides.rootDir = config.test?.environmentOptions?.nuxt?.rootDir;
+    if (config.test?.setupFiles && !Array.isArray(config.test.setupFiles)) {
+      config.test.setupFiles = [config.test.setupFiles].filter(Boolean);
+    }
     return defu(
       config,
-      await getVitestConfigFromNuxt(void 0, overrides)
+      await getVitestConfigFromNuxt(void 0, structuredClone(overrides))
     );
   });
 }

package/dist/{index.d.mts → e2e.d.mts}

@@ -37,6 +37,11 @@ interface TestContext {
     url?: string;
     serverProcess?: ExecaChildProcess;
     mockFn?: Function;
+    /**
+     * Functions to run on the vitest `afterAll` hook.
+     * Useful for removing anything created during the test.
+     */
+    teardown?: (() => void)[];
 }
 interface TestHooks {
     beforeEach: () => void;

package/dist/{index.d.ts → e2e.d.ts}

@@ -37,6 +37,11 @@ interface TestContext {
     url?: string;
     serverProcess?: ExecaChildProcess;
     mockFn?: Function;
+    /**
+     * Functions to run on the vitest `afterAll` hook.
+     * Useful for removing anything created during the test.
+     */
+    teardown?: (() => void)[];
 }
 interface TestHooks {
     beforeEach: () => void;

package/dist/{index.mjs → e2e.mjs}

@@ -1,7 +1,7 @@
 import { u as useTestContext, a as url, c as createTestContext, s as setTestContext, b as stopServer, d as startServer } from './shared/test-utils-nightly.ddf5bsCK.mjs';
 export { $ as $fetch, e as exposeContextToEnv, f as fetch, i as isDev, r as recoverContextFromEnv } from './shared/test-utils-nightly.ddf5bsCK.mjs';
 import { consola } from 'consola';
-import { promises, existsSync } from 'node:fs';
+import { existsSync, promises } from 'node:fs';
 import { resolve } from 'node:path';
 import { defu } from 'defu';
 import * as _kit from '@nuxt/kit';
@@ -83,12 +83,12 @@ async function loadFixture() {
   ctx.options.rootDir = resolveRootDir();
   if (!ctx.options.dev) {
     const randomId = Math.random().toString(36).slice(2, 8);
-    const buildDir = ctx.options.buildDir || resolve(ctx.options.rootDir, ".nuxt", randomId);
+    const buildDir2 = ctx.options.buildDir || resolve(ctx.options.rootDir, ".nuxt", "test", randomId);
     ctx.options.nuxtConfig = defu(ctx.options.nuxtConfig, {
-      buildDir,
+      buildDir: buildDir2,
       nitro: {
         output: {
-          dir: resolve(buildDir, "output")
+          dir: resolve(buildDir2, "output")
         }
       }
     });
@@ -99,7 +99,12 @@ async function loadFixture() {
     overrides: ctx.options.nuxtConfig,
     configFile: ctx.options.configFile
   });
-  await promises.mkdir(ctx.nuxt.options.buildDir, { recursive: true });
+  const buildDir = ctx.nuxt.options.buildDir;
+  if (!existsSync(buildDir)) {
+    await promises.mkdir(buildDir, { recursive: true });
+    ctx.teardown = ctx.teardown || [];
+    ctx.teardown.push(() => promises.rm(buildDir, { recursive: true, force: true }));
+  }
 }
 async function buildFixture() {
   const ctx = useTestContext();
@@ -151,6 +156,7 @@ function createTest(options) {
     if (ctx.browser) {
       await ctx.browser.close();
     }
+    await Promise.all((ctx.teardown || []).map((fn) => fn()));
   };
   const setup2 = async () => {
     if (ctx.options.fixture) {

package/dist/module.mjs

@@ -12,6 +12,7 @@ import MagicString from 'magic-string';
 import { normalize, resolve } from 'node:path';
 import { createUnplugin } from 'unplugin';
 import { readFileSync } from 'node:fs';
+import { extname, join, dirname } from 'pathe';
 
 const PLUGIN_NAME$1 = "nuxt:vitest:mock-transform";
 const HELPER_MOCK_IMPORT = "mockNuxtImport";
@@ -224,7 +225,7 @@ const createMockPlugin = (ctx) => createUnplugin(() => {
           resolvedFirstSetupFile = await resolvePath(normalize(resolve(firstSetupFile)));
         }
         const plugins = config.plugins || [];
-        const vitestPlugins = plugins.filter((p) => p.name === "vite:mocks" || p.name.startsWith("vitest:"));
+        const vitestPlugins = plugins.filter((p) => (p.name === "vite:mocks" || p.name.startsWith("vitest:")) && (p.enforce || p.order) === "post");
         const lastNuxt = findLastIndex(
           plugins,
           (i) => i.name?.startsWith("nuxt:")
@@ -300,18 +301,20 @@ function setupImportMocking() {
 }
 
 const PLUGIN_NAME = "nuxt:vitest:nuxt-root-stub";
+const STUB_ID = "nuxt-vitest-app-entry";
 const NuxtRootStubPlugin = createUnplugin((options) => {
+  const STUB_ID_WITH_EXT = STUB_ID + extname(options.entry);
   return {
     name: PLUGIN_NAME,
     enforce: "pre",
     vite: {
-      async resolveId(id) {
-        if (id.endsWith("nuxt-vitest-app-entry")) {
-          return id;
+      async resolveId(id, importer) {
+        if (id.endsWith(STUB_ID) || id.endsWith(STUB_ID_WITH_EXT)) {
+          return importer?.endsWith("index.html") ? id : join(dirname(options.entry), STUB_ID_WITH_EXT);
         }
       },
       async load(id) {
-        if (id.endsWith("nuxt-vitest-app-entry")) {
+        if (id.endsWith(STUB_ID) || id.endsWith(STUB_ID_WITH_EXT)) {
           const entryContents = readFileSync(options.entry, "utf-8");
           return entryContents.replace("#build/root-component.mjs", options.rootStubPath);
         }
@@ -320,7 +323,7 @@ const NuxtRootStubPlugin = createUnplugin((options) => {
   };
 });
 
-const vitePluginBlocklist = ["vite-plugin-vue-inspector", "vite-plugin-inspect"];
+const vitePluginBlocklist = ["vite-plugin-vue-inspector", "vite-plugin-vue-inspector:post", "vite-plugin-inspect"];
 const module = defineNuxtModule({
   meta: {
     name: "@nuxt/test-utils",
@@ -341,9 +344,6 @@ const module = defineNuxtModule({
     }));
     if (!nuxt.options.dev)
       return;
-    if (nuxt.options.test && nuxt.options.app.rootId === "__nuxt") {
-      nuxt.options.app.rootId = "nuxt-test";
-    }
     if (process.env.TEST || process.env.VITE_TEST)
       return;
     const rawViteConfigPromise = new Promise((resolve) => {
@@ -354,8 +354,6 @@ const module = defineNuxtModule({
         });
       });
     });
-    const PORT = await getPort({ port: 15555 });
-    const URL = `http://localhost:${PORT}/__vitest__/`;
     let loaded = false;
     let promise;
     let ctx = void 0;
@@ -363,6 +361,7 @@ const module = defineNuxtModule({
     const updateTabs = debounce(() => {
       nuxt.callHook("devtools:customTabs:refresh");
     }, 100);
+    let URL;
     async function start() {
       const rawViteConfig = mergeConfig({}, await rawViteConfigPromise);
       const viteConfig = await getVitestConfigFromNuxt({ nuxt, viteConfig: defu({ test: options.vitestConfig }, rawViteConfig) });
@@ -385,6 +384,9 @@ const module = defineNuxtModule({
         }
       };
       const watchMode = !process.env.NUXT_VITEST_DEV_TEST && !isCI;
+      const PORT = await getPort({ port: 15555 });
+      const PROTOCOL = nuxt.options.devServer.https ? "https" : "http";
+      URL = `${PROTOCOL}://localhost:${PORT}/__vitest__/`;
       const overrides = watchMode ? {
         passWithNoTests: true,
         reporters: options.logToConsole ? [

package/dist/runtime/entry.mjs

@@ -1,5 +1,6 @@
 if (typeof window !== "undefined" && // @ts-expect-error undefined property
 window.__NUXT_VITEST_ENVIRONMENT__) {
+  const { useRouter } = await import("#app/composables/router");
   await import("#app/nuxt-vitest-app-entry").then((r) => r.default());
   const nuxtApp = useNuxtApp();
   await nuxtApp.callHook("page:finish");

package/dist/runtime/global-setup.mjs

@@ -1,5 +1,5 @@
 import * as _kit from "@nuxt/kit";
-import { createTest, exposeContextToEnv } from "@nuxt/test-utils";
+import { createTest, exposeContextToEnv } from "@nuxt/test-utils/e2e";
 const kit = _kit.default || _kit;
 const options = JSON.parse(process.env.NUXT_TEST_OPTIONS || "{}");
 const hooks = createTest(options);

package/dist/{runtime-utils.d.ts → runtime-utils/index.d.mts}

@@ -13,7 +13,7 @@ type OptionalFunction<T> = T | (() => Awaitable<T>);
  * @param options - factory function that returns the mocked data or an object containing both the `handler` and the `method` properties.
  * @example
  * ```ts
- * import { registerEndpoint } from '@nuxt/test-utils/runtime-utils'
+ * import { registerEndpoint } from '@nuxt/test-utils/runtime'
  *
  * registerEndpoint("/test/", () => {
  *  test: "test-field"
@@ -31,7 +31,7 @@ declare function registerEndpoint(url: string, options: EventHandler | {
  * @param _factory - factory function that returns mocked import.
  * @example
  * ```ts
- * import { mockNuxtImport } from '@nuxt/test-utils/runtime-utils'
+ * import { mockNuxtImport } from '@nuxt/test-utils/runtime'
  *
  * mockNuxtImport('useStorage', () => {
  *  return () => {
@@ -48,7 +48,7 @@ declare function mockNuxtImport<T = any>(_name: string, _factory: () => T | Prom
  * @param setup - factory function that returns the mocked component.
  * @example
  * ```ts
- * import { mockComponent } from '@nuxt/test-utils/runtime-utils'
+ * import { mockComponent } from '@nuxt/test-utils/runtime'
  *
  * mockComponent('MyComponent', {
  *  props: {
@@ -123,7 +123,7 @@ type RenderOptions = RenderOptions$1 & {
  *
  * ```ts
  * // tests/components/SomeComponents.nuxt.spec.ts
- * import { renderSuspended } from '@nuxt/test-utils/runtime-utils'
+ * import { renderSuspended } from '@nuxt/test-utils/runtime'
  *
  * it('can render some component', async () => {
  * const { html } = await renderSuspended(SomeComponent)
@@ -134,7 +134,7 @@ type RenderOptions = RenderOptions$1 & {
  * })
  *
  * // tests/App.nuxt.spec.ts
- * import { renderSuspended } from '@nuxt/test-utils/runtime-utils'
+ * import { renderSuspended } from '@nuxt/test-utils/runtime'
  * import { screen } from '@testing-library/vue'
  *
  * it('can also mount an app', async () => {

package/dist/{runtime-utils.d.mts → runtime-utils/index.d.ts}

@@ -13,7 +13,7 @@ type OptionalFunction<T> = T | (() => Awaitable<T>);
  * @param options - factory function that returns the mocked data or an object containing both the `handler` and the `method` properties.
  * @example
  * ```ts
- * import { registerEndpoint } from '@nuxt/test-utils/runtime-utils'
+ * import { registerEndpoint } from '@nuxt/test-utils/runtime'
  *
  * registerEndpoint("/test/", () => {
  *  test: "test-field"
@@ -31,7 +31,7 @@ declare function registerEndpoint(url: string, options: EventHandler | {
  * @param _factory - factory function that returns mocked import.
  * @example
  * ```ts
- * import { mockNuxtImport } from '@nuxt/test-utils/runtime-utils'
+ * import { mockNuxtImport } from '@nuxt/test-utils/runtime'
  *
  * mockNuxtImport('useStorage', () => {
  *  return () => {
@@ -48,7 +48,7 @@ declare function mockNuxtImport<T = any>(_name: string, _factory: () => T | Prom
  * @param setup - factory function that returns the mocked component.
  * @example
  * ```ts
- * import { mockComponent } from '@nuxt/test-utils/runtime-utils'
+ * import { mockComponent } from '@nuxt/test-utils/runtime'
  *
  * mockComponent('MyComponent', {
  *  props: {
@@ -123,7 +123,7 @@ type RenderOptions = RenderOptions$1 & {
  *
  * ```ts
  * // tests/components/SomeComponents.nuxt.spec.ts
- * import { renderSuspended } from '@nuxt/test-utils/runtime-utils'
+ * import { renderSuspended } from '@nuxt/test-utils/runtime'
  *
  * it('can render some component', async () => {
  * const { html } = await renderSuspended(SomeComponent)
@@ -134,7 +134,7 @@ type RenderOptions = RenderOptions$1 & {
  * })
  *
  * // tests/App.nuxt.spec.ts
- * import { renderSuspended } from '@nuxt/test-utils/runtime-utils'
+ * import { renderSuspended } from '@nuxt/test-utils/runtime'
  * import { screen } from '@testing-library/vue'
  *
  * it('can also mount an app', async () => {

package/dist/{runtime-utils.mjs → runtime-utils/index.mjs}

@@ -102,19 +102,21 @@ async function mountSuspended(component, options) {
             },
             {
               default: () => h$1({
+                name: "MountSuspendedHelper",
                 async setup() {
                   const router = useRouter();
                   await router.replace(route);
                   const clonedComponent = {
+                    name: "MountSuspendedComponent",
                     ...component,
-                    render: render ? (_ctx, ...args) => {
-                      for (const key in _ctx) {
+                    render: render ? function(_ctx, ...args) {
+                      for (const key in props || {}) {
                         renderContext[key] = _ctx[key];
                       }
-                      return render.apply(_ctx, [
-                        renderContext,
-                        ...args
-                      ]);
+                      for (const key in setupState || {}) {
+                        renderContext[key] = setupState[key];
+                      }
+                      return render.call(this, renderContext, ...args);
                     } : void 0,
                     setup: setup ? (props2) => wrappedSetup(props2, setupContext) : void 0
                   };
@@ -124,16 +126,24 @@ async function mountSuspended(component, options) {
             }
           )
         },
-        defu(_options, {
-          slots,
-          global: {
-            config: {
-              globalProperties: vueApp.config.globalProperties
-            },
-            provide: vueApp._context.provides,
-            components: { RouterLink }
+        defu(
+          _options,
+          {
+            slots,
+            global: {
+              config: {
+                globalProperties: vueApp.config.globalProperties
+              },
+              provide: vueApp._context.provides,
+              stubs: {
+                Suspense: false,
+                MountSuspendedHelper: false,
+                [typeof component.name === "string" ? component.name : "MountSuspendedComponent"]: false
+              },
+              components: { RouterLink }
+            }
           }
-        })
+        )
       );
     }
   );
@@ -151,6 +161,7 @@ async function renderSuspended(component, options) {
   const { render: renderFromTestingLibrary } = await import('@testing-library/vue');
   const { vueApp } = globalThis.__unctx__.get("nuxt-app").tryUse();
   const { render, setup } = component;
+  document.querySelector(`#${WRAPPER_EL_ID}`)?.remove();
   let setupContext;
   return new Promise((resolve) => {
     const utils = renderFromTestingLibrary(

package/e2e.d.ts

@@ -0,0 +1 @@
+export * from './dist/e2e'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/test-utils-nightly",
-  "version": "4.0.0-1701501480.7490334",
+  "version": "4.0.0-1702810232.fba662c",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/test-utils.git"
@@ -8,21 +8,23 @@
   "description": "Test utilities for Nuxt",
   "license": "MIT",
   "type": "module",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/e2e.d.ts",
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": "./dist/e2e.mjs",
     "./config": "./dist/config.mjs",
+    "./e2e": "./dist/e2e.mjs",
     "./experimental": "./dist/experimental.mjs",
     "./module": "./dist/module.mjs",
-    "./runtime-utils": "./dist/runtime-utils.mjs",
+    "./runtime": "./dist/runtime-utils/index.mjs",
     "./vitest-environment": "./dist/vitest-environment.mjs"
   },
   "files": [
     "dist",
     "config.d.ts",
+    "e2e.d.ts",
     "experimental.d.ts",
     "module.d.ts",
-    "runtime-utils.d.ts",
+    "runtime.d.ts",
     "vitest-environment.d.ts"
   ],
   "scripts": {
@@ -55,46 +57,49 @@
     "ufo": "^1.3.2",
     "unenv": "^1.8.0",
     "unplugin": "^1.5.1",
-    "vitest-environment-nuxt": "0.12.0"
+    "vitest-environment-nuxt": "1.0.0-alpha.1"
   },
   "devDependencies": {
     "@jest/globals": "29.7.0",
-    "@nuxt/devtools": "1.0.4",
+    "@nuxt/devtools": "1.0.6",
     "@nuxt/eslint-config": "0.2.0",
     "@nuxt/module-builder": "0.5.4",
     "@testing-library/vue": "8.0.1",
     "@types/estree": "1.0.5",
     "@types/jsdom": "21.1.6",
-    "@vitest/ui": "0.33.0",
+    "@types/semver": "7.5.6",
+    "@vitest/ui": "1.0.4",
     "@vue/test-utils": "2.4.3",
     "changelogen": "0.5.5",
-    "eslint": "8.55.0",
-    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-jsdoc": "46.9.0",
+    "eslint": "8.56.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsdoc": "46.9.1",
     "eslint-plugin-no-only-tests": "3.1.0",
     "eslint-plugin-unicorn": "49.0.0",
     "h3": "1.9.0",
+    "jiti": "1.21.0",
     "nuxt": "3.8.2",
     "playwright-core": "1.40.1",
-    "rollup": "4.6.1",
+    "rollup": "4.9.1",
+    "semver": "7.5.4",
     "unbuild": "latest",
-    "unimport": "3.6.0",
-    "vite": "5.0.4",
-    "vitest": "0.33.0",
+    "unimport": "3.6.1",
+    "vite": "5.0.10",
+    "vitest": "1.0.4",
     "vue-router": "4.2.5",
-    "vue-tsc": "1.8.24"
+    "vue-tsc": "1.8.25"
   },
   "peerDependencies": {
     "@jest/globals": "^29.5.0",
     "@testing-library/vue": "^7.0.0 || ^8.0.1",
-    "@vitest/ui": "0.33.0",
+    "@vitest/ui": "^0.34.6 || ^1.0.0",
     "@vue/test-utils": "^2.4.2",
     "h3": "*",
     "happy-dom": "^9.10.9 || ^10.0.0 || ^11.0.0 || ^12.0.0",
     "jsdom": "^22.0.0 || ^23.0.0",
     "playwright-core": "^1.34.3",
     "vite": "*",
-    "vitest": "^0.24.5 || ^0.26.0 || ^0.27.0 || ^0.28.0 || ^0.29.0 || ^0.30.0 || ^0.33.0",
+    "vitest": "^0.34.6 || ^1.0.0",
     "vue": "^3.3.4",
     "vue-router": "^4.0.0"
   },
@@ -126,12 +131,11 @@
   },
   "resolutions": {
     "@nuxt/test-utils": "workspace:*",
-    "vitest-environment-nuxt": "workspace:*",
-    "rollup": "4.6.1",
-    "vite": "5.0.4"
+    "rollup": "4.9.1",
+    "vite": "5.0.10"
   },
   "engines": {
     "node": "^14.18.0 || >=16.10.0"
   },
-  "packageManager": "pnpm@8.11.0"
+  "packageManager": "pnpm@8.12.1"
 }

package/runtime.d.ts

@@ -0,0 +1 @@
+export * from './dist/runtime-utils/index.mjs'

package/runtime-utils.d.ts

@@ -1 +0,0 @@
-export * from './dist/runtime-utils'