@nuxt/test-utils-nightly 4.0.0-1699284348.a89cc29 → 4.0.0-1701501480.7490334

package/dist/runtime-utils.d.ts

@@ -0,0 +1,150 @@
+import { EventHandler, HTTPMethod } from 'h3';
+import { SetupContext, RenderFunction, ComputedOptions, MethodOptions, ComponentOptionsMixin, EmitsOptions, ComponentInjectOptions, ComponentOptionsWithoutProps, ComponentOptionsWithArrayProps, ComponentPropsOptions, ComponentOptionsWithObjectProps } from 'vue';
+import { mount, ComponentMountingOptions } from '@vue/test-utils';
+import { RouteLocationRaw } from 'vue-router';
+import * as _testing_library_vue from '@testing-library/vue';
+import { RenderOptions as RenderOptions$1 } from '@testing-library/vue';
+
+type Awaitable<T> = T | Promise<T>;
+type OptionalFunction<T> = T | (() => Awaitable<T>);
+/**
+ * `registerEndpoint` allows you create Nitro endpoint that returns mocked data. It can come in handy if you want to test a component that makes requests to API to display some data.
+ * @param url - endpoint name (e.g. `/test/`).
+ * @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'
+ *
+ * registerEndpoint("/test/", () => {
+ *  test: "test-field"
+ * })
+ * ```
+ * @see https://github.com/danielroe/nuxt-vitest#registerendpoint
+ */
+declare function registerEndpoint(url: string, options: EventHandler | {
+    handler: EventHandler;
+    method: HTTPMethod;
+}): void;
+/**
+ * `mockNuxtImport` allows you to mock Nuxt's auto import functionality.
+ * @param _name - name of an import to mock.
+ * @param _factory - factory function that returns mocked import.
+ * @example
+ * ```ts
+ * import { mockNuxtImport } from '@nuxt/test-utils/runtime-utils'
+ *
+ * mockNuxtImport('useStorage', () => {
+ *  return () => {
+ *    return { value: 'mocked storage' }
+ *  }
+ * })
+ * ```
+ * @see https://github.com/danielroe/nuxt-vitest#mocknuxtimport
+ */
+declare function mockNuxtImport<T = any>(_name: string, _factory: () => T | Promise<T>): void;
+/**
+ * `mockComponent` allows you to mock Nuxt's component.
+ * @param path - component name in PascalCase, or the relative path of the component.
+ * @param setup - factory function that returns the mocked component.
+ * @example
+ * ```ts
+ * import { mockComponent } from '@nuxt/test-utils/runtime-utils'
+ *
+ * mockComponent('MyComponent', {
+ *  props: {
+ *    value: String
+ *  },
+ *  setup(props) {
+ *    // ...
+ *  }
+ * })
+ *
+ * // relative path or alias also works
+ * mockComponent('~/components/my-component.vue', async () => {
+ *  // or a factory function
+ *  return {
+ *    setup(props) {
+ *      // ...
+ *    }
+ *  }
+ * })
+ *
+ * // or you can use SFC for redirecting to a mock component
+ * mockComponent('MyComponent', () => import('./MockComponent.vue'))
+ * ```
+ * @see https://github.com/danielroe/nuxt-vitest#mockcomponent
+ */
+declare function mockComponent<Props, RawBindings = object>(path: string, setup: OptionalFunction<(props: Readonly<Props>, ctx: SetupContext) => RawBindings | RenderFunction>): void;
+declare function mockComponent<Props = {}, RawBindings = {}, D = {}, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = {}, EE extends string = string, I extends ComponentInjectOptions = {}, II extends string = string>(path: string, options: OptionalFunction<ComponentOptionsWithoutProps<Props, RawBindings, D, C, M, Mixin, Extends, E, EE, I, II>>): void;
+declare function mockComponent<PropNames extends string, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = {}, EE extends string = string, I extends ComponentInjectOptions = {}, II extends string = string>(path: string, options: OptionalFunction<ComponentOptionsWithArrayProps<PropNames, RawBindings, D, C, M, Mixin, Extends, E, EE, I, II>>): void;
+declare function mockComponent<PropsOptions extends Readonly<ComponentPropsOptions>, RawBindings, D, C extends ComputedOptions = {}, M extends MethodOptions = {}, Mixin extends ComponentOptionsMixin = ComponentOptionsMixin, Extends extends ComponentOptionsMixin = ComponentOptionsMixin, E extends EmitsOptions = {}, EE extends string = string, I extends ComponentInjectOptions = {}, II extends string = string>(path: string, options: OptionalFunction<ComponentOptionsWithObjectProps<PropsOptions, RawBindings, D, C, M, Mixin, Extends, E, EE, I, II>>): void;
+
+type MountSuspendedOptions<T> = ComponentMountingOptions<T> & {
+    route?: RouteLocationRaw;
+};
+/**
+ * `mountSuspended` allows you to mount any vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example:
+ *
+ * ```ts
+ * // tests/components/SomeComponents.nuxt.spec.ts
+ * it('can mount some component', async () => {
+ * const component = await mountSuspended(SomeComponent)
+ * expect(component.text()).toMatchInlineSnapshot(
+ * 'This is an auto-imported component'
+ * )
+ * })
+ *
+ * // tests/App.nuxt.spec.ts
+ * it('can also mount an app', async () => {
+ * const component = await mountSuspended(App, { route: '/test' })
+ * expect(component.html()).toMatchInlineSnapshot(`
+ * "<div>This is an auto-imported component</div>
+ * <div> I am a global component </div>
+ * <div>/</div>
+ * <a href=\\"/test\\"> Test link </a>"
+ * `)
+ * })
+ * ```
+ * @param component the component to be tested
+ * @param options optional options to set up your component
+ */
+declare function mountSuspended<T>(component: T, options?: MountSuspendedOptions<T>): Promise<ReturnType<typeof mount<T>> & {
+    setupState: any;
+}>;
+
+type RenderOptions = RenderOptions$1 & {
+    route?: RouteLocationRaw;
+};
+/**
+ * `renderSuspended` allows you to mount any vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins.
+ *
+ * This is a wrapper around the `render` function from @testing-libary/vue, and should be used together with
+ * utilities from that package.
+ *
+ * ```ts
+ * // tests/components/SomeComponents.nuxt.spec.ts
+ * import { renderSuspended } from '@nuxt/test-utils/runtime-utils'
+ *
+ * it('can render some component', async () => {
+ * const { html } = await renderSuspended(SomeComponent)
+ * expect(html()).toMatchInlineSnapshot(
+ * 'This is an auto-imported component'
+ * )
+ *
+ * })
+ *
+ * // tests/App.nuxt.spec.ts
+ * import { renderSuspended } from '@nuxt/test-utils/runtime-utils'
+ * import { screen } from '@testing-library/vue'
+ *
+ * it('can also mount an app', async () => {
+ * const { html } = await renderSuspended(App, { route: '/test' })
+ * expect(screen.getByRole('link', { name: 'Test Link' })).toBeVisible()
+ * })
+ * ```
+ * @param component the component to be tested
+ * @param options optional options to set up your component
+ */
+declare function renderSuspended<T>(component: T, options?: RenderOptions): Promise<_testing_library_vue.RenderResult>;
+
+export { mockComponent, mockNuxtImport, mountSuspended, registerEndpoint, renderSuspended };

package/dist/runtime-utils.mjs

@@ -0,0 +1,212 @@
+import { defineEventHandler } from 'h3';
+import { mount } from '@vue/test-utils';
+import { h as h$1, Suspense, nextTick } from 'vue';
+import { defu } from 'defu';
+import { defineComponent, useRouter, h } from '#imports';
+import NuxtRoot from '#build/root-component.mjs';
+
+function registerEndpoint(url, options) {
+  const app = window.__app;
+  if (!app)
+    return;
+  const config = typeof options === "function" ? {
+    handler: options,
+    method: void 0
+  } : options;
+  app.use("/_" + url, defineEventHandler(config.handler), {
+    match(_, event) {
+      return config.method ? event?.method === config.method : true;
+    }
+  });
+  window.__registry.add(url);
+}
+function mockNuxtImport(_name, _factory) {
+  throw new Error(
+    "mockNuxtImport() is a macro and it did not get transpiled, this may be an internal bug of nuxt-vitest."
+  );
+}
+function mockComponent(_path, _component) {
+  throw new Error(
+    "mockComponent() is a macro and it did not get transpiled, this may be an internal bug of nuxt-vitest."
+  );
+}
+
+const RouterLink = defineComponent({
+  functional: true,
+  props: {
+    to: [String, Object],
+    custom: Boolean,
+    replace: Boolean,
+    // Not implemented
+    activeClass: String,
+    exactActiveClass: String,
+    ariaCurrentValue: String
+  },
+  setup: (props, { slots }) => {
+    const navigate = () => {
+    };
+    return () => {
+      const route = props.to ? useRouter().resolve(props.to) : {};
+      return props.custom ? slots.default?.({ href: props.to, navigate, route }) : h(
+        "a",
+        {
+          href: props.to,
+          onClick: (e) => {
+            e.preventDefault();
+            return navigate();
+          }
+        },
+        slots
+      );
+    };
+  }
+});
+
+async function mountSuspended(component, options) {
+  const {
+    props = {},
+    attrs = {},
+    slots = {},
+    route = "/",
+    ..._options
+  } = options || {};
+  const vueApp = globalThis.__unctx__.get("nuxt-app").tryUse().vueApp;
+  const { render, setup } = component;
+  let setupContext;
+  let setupState;
+  const wrappedSetup = async (props2, setupContext2) => {
+    if (setup) {
+      setupState = await setup(props2, setupContext2);
+      return setupState;
+    }
+  };
+  return new Promise(
+    (resolve) => {
+      const vm = mount(
+        {
+          setup: (props2, ctx) => {
+            setupContext = ctx;
+            return NuxtRoot.setup(props2, {
+              ...ctx,
+              expose: () => {
+              }
+            });
+          },
+          render: (renderContext) => h$1(
+            Suspense,
+            {
+              onResolve: () => nextTick().then(() => {
+                vm.setupState = setupState;
+                resolve(vm);
+              })
+            },
+            {
+              default: () => h$1({
+                async setup() {
+                  const router = useRouter();
+                  await router.replace(route);
+                  const clonedComponent = {
+                    ...component,
+                    render: render ? (_ctx, ...args) => {
+                      for (const key in _ctx) {
+                        renderContext[key] = _ctx[key];
+                      }
+                      return render.apply(_ctx, [
+                        renderContext,
+                        ...args
+                      ]);
+                    } : void 0,
+                    setup: setup ? (props2) => wrappedSetup(props2, setupContext) : void 0
+                  };
+                  return () => h$1(clonedComponent, { ...props, ...attrs }, slots);
+                }
+              })
+            }
+          )
+        },
+        defu(_options, {
+          slots,
+          global: {
+            config: {
+              globalProperties: vueApp.config.globalProperties
+            },
+            provide: vueApp._context.provides,
+            components: { RouterLink }
+          }
+        })
+      );
+    }
+  );
+}
+
+const WRAPPER_EL_ID = "test-wrapper";
+async function renderSuspended(component, options) {
+  const {
+    props = {},
+    attrs = {},
+    slots = {},
+    route = "/",
+    ..._options
+  } = options || {};
+  const { render: renderFromTestingLibrary } = await import('@testing-library/vue');
+  const { vueApp } = globalThis.__unctx__.get("nuxt-app").tryUse();
+  const { render, setup } = component;
+  let setupContext;
+  return new Promise((resolve) => {
+    const utils = renderFromTestingLibrary(
+      {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        setup: (props2, ctx) => {
+          setupContext = ctx;
+          return NuxtRoot.setup(props2, {
+            ...ctx,
+            expose: () => {
+            }
+          });
+        },
+        render: (renderContext) => (
+          // See discussions in https://github.com/testing-library/vue-testing-library/issues/230
+          // we add this additional root element because otherwise testing-library breaks
+          // because there's no root element while Suspense is resolving
+          h$1(
+            "div",
+            { id: WRAPPER_EL_ID },
+            h$1(
+              Suspense,
+              { onResolve: () => nextTick().then(() => resolve(utils)) },
+              {
+                default: () => h$1({
+                  async setup() {
+                    const router = useRouter();
+                    await router.replace(route);
+                    const clonedComponent = {
+                      ...component,
+                      render: render ? (_ctx, ...args) => render(renderContext, ...args) : void 0,
+                      setup: setup ? (
+                        // eslint-disable-next-line @typescript-eslint/no-shadow
+                        (props2) => setup(props2, setupContext)
+                      ) : void 0
+                    };
+                    return () => h$1(clonedComponent, { ...props, ...attrs }, slots);
+                  }
+                })
+              }
+            )
+          )
+        )
+      },
+      defu(_options, {
+        slots,
+        global: {
+          config: {
+            globalProperties: vueApp.config.globalProperties
+          },
+          provide: vueApp._context.provides,
+          components: { RouterLink }
+        }
+      })
+    );
+  });
+}
+
+export { mockComponent, mockNuxtImport, mountSuspended, registerEndpoint, renderSuspended };

package/dist/vitest-environment.d.mts

@@ -0,0 +1,22 @@
+import { Environment } from 'vitest';
+import { App } from 'h3';
+
+declare const _default: Environment;
+
+type NuxtBuiltinEnvironment = 'happy-dom' | 'jsdom';
+interface NuxtWindow extends Window {
+    __app: App;
+    __registry: Set<string>;
+    __NUXT_VITEST_ENVIRONMENT__?: boolean;
+    __NUXT__: any;
+    $fetch: any;
+    fetch: any;
+    IntersectionObserver: any;
+    Headers: any;
+}
+type EnvironmentNuxt = (global: any, options: Record<string, any>) => Promise<{
+    window: NuxtWindow;
+    teardown(): void;
+}>;
+
+export { type EnvironmentNuxt, type NuxtBuiltinEnvironment, type NuxtWindow, _default as default };

package/dist/vitest-environment.d.ts

@@ -0,0 +1,22 @@
+import { Environment } from 'vitest';
+import { App } from 'h3';
+
+declare const _default: Environment;
+
+type NuxtBuiltinEnvironment = 'happy-dom' | 'jsdom';
+interface NuxtWindow extends Window {
+    __app: App;
+    __registry: Set<string>;
+    __NUXT_VITEST_ENVIRONMENT__?: boolean;
+    __NUXT__: any;
+    $fetch: any;
+    fetch: any;
+    IntersectionObserver: any;
+    Headers: any;
+}
+type EnvironmentNuxt = (global: any, options: Record<string, any>) => Promise<{
+    window: NuxtWindow;
+    teardown(): void;
+}>;
+
+export { type EnvironmentNuxt, type NuxtBuiltinEnvironment, type NuxtWindow, _default as default };

package/dist/vitest-environment.mjs

@@ -0,0 +1,175 @@
+import { createFetch as createFetch$1 } from 'ofetch';
+import { indexedDB } from 'fake-indexeddb';
+import { joinURL } from 'ufo';
+import { createApp, toNodeListener, defineEventHandler } from 'h3';
+import defu from 'defu';
+import { toRouteMatcher, createRouter, exportMatcher } from 'radix3';
+import { populateGlobal } from 'vitest/environments';
+import { createCall, createFetch } from 'unenv/runtime/fetch/index';
+import { importModule } from 'local-pkg';
+
+const happyDom = (async function(_, { happyDom = {} }) {
+  const { Window, GlobalWindow } = await importModule(
+    "happy-dom"
+  );
+  const window = new (GlobalWindow || Window)(happyDom);
+  return {
+    window,
+    teardown() {
+      window.happyDOM.cancelAsync();
+    }
+  };
+});
+
+const jsdom = (async function(global, { jsdom = {} }) {
+  const { CookieJar, JSDOM, ResourceLoader, VirtualConsole } = await importModule("jsdom");
+  const {
+    html = "<!DOCTYPE html>",
+    userAgent,
+    url = "http://localhost:3000",
+    contentType = "text/html",
+    pretendToBeVisual = true,
+    includeNodeLocations = false,
+    runScripts = "dangerously",
+    resources,
+    console = false,
+    cookieJar = false,
+    ...restOptions
+  } = jsdom;
+  const window = new JSDOM(html, {
+    pretendToBeVisual,
+    resources: resources ?? (userAgent ? new ResourceLoader({ userAgent }) : void 0),
+    runScripts,
+    url,
+    virtualConsole: console && global.console ? new VirtualConsole().sendTo(global.console) : void 0,
+    cookieJar: cookieJar ? new CookieJar() : void 0,
+    includeNodeLocations,
+    contentType,
+    userAgent,
+    ...restOptions
+  }).window;
+  window.scrollTo = () => {
+  };
+  return {
+    window,
+    teardown() {
+    }
+  };
+});
+
+const environmentMap = {
+  "happy-dom": happyDom,
+  jsdom
+};
+const index = {
+  name: "nuxt",
+  transformMode: "web",
+  async setup(global, environmentOptions) {
+    const url = joinURL("http://localhost:3000", environmentOptions?.nuxtRuntimeConfig.app?.baseURL || "/");
+    const environmentName = environmentOptions.nuxt.domEnvironment;
+    const environment = environmentMap[environmentName] || environmentMap["happy-dom"];
+    const { window: win, teardown } = await environment(global, defu(environmentOptions, {
+      happyDom: { url },
+      jsdom: { url }
+    }));
+    win.__NUXT_VITEST_ENVIRONMENT__ = true;
+    win.__NUXT__ = {
+      serverRendered: false,
+      config: {
+        public: {},
+        app: { baseURL: "/" },
+        ...environmentOptions?.nuxtRuntimeConfig
+      },
+      data: {},
+      state: {}
+    };
+    const app = win.document.createElement("div");
+    app.id = environmentOptions.nuxt.rootId;
+    win.document.body.appendChild(app);
+    if (environmentOptions?.nuxt?.mock?.intersectionObserver) {
+      win.IntersectionObserver = win.IntersectionObserver || class IntersectionObserver {
+        observe() {
+        }
+        unobserve() {
+        }
+        disconnect() {
+        }
+      };
+    }
+    if (environmentOptions?.nuxt?.mock?.indexedDb) {
+      win.indexedDB = indexedDB;
+    }
+    const h3App = createApp();
+    if (!win.fetch) {
+      await import('node-fetch-native/polyfill');
+      win.URLSearchParams = globalThis.URLSearchParams;
+    }
+    const localCall = createCall(toNodeListener(h3App));
+    const localFetch = createFetch(localCall, win.fetch);
+    const registry = /* @__PURE__ */ new Set();
+    win.fetch = (init, options) => {
+      if (typeof init === "string") {
+        const base = init.split("?")[0];
+        if (registry.has(base) || registry.has(init)) {
+          init = "/_" + init;
+        }
+      }
+      return localFetch(init, options);
+    };
+    win.$fetch = createFetch$1({ fetch: win.fetch, Headers: win.Headers });
+    win.__registry = registry;
+    win.__app = h3App;
+    const { keys, originals } = populateGlobal(global, win, {
+      bindFunctions: true
+    });
+    const timestamp = Date.now();
+    const routeRulesMatcher = toRouteMatcher(
+      createRouter({ routes: environmentOptions.nuxtRouteRules || {} })
+    );
+    const matcher = exportMatcher(routeRulesMatcher);
+    const manifestOutputPath = joinURL(
+      "/",
+      environmentOptions?.nuxtRuntimeConfig.app?.buildAssetsDir || "_nuxt",
+      "builds"
+    );
+    const manifestBaseRoutePath = joinURL("/_", manifestOutputPath);
+    h3App.use(
+      `${manifestBaseRoutePath}/latest.json`,
+      defineEventHandler(() => ({
+        id: "test",
+        timestamp
+      }))
+    );
+    h3App.use(
+      `${manifestBaseRoutePath}/meta/test.json`,
+      defineEventHandler(() => ({
+        id: "test",
+        timestamp,
+        matcher,
+        prerendered: []
+      }))
+    );
+    h3App.use(
+      `${manifestBaseRoutePath}/meta/dev.json`,
+      defineEventHandler(() => ({
+        id: "test",
+        timestamp,
+        matcher,
+        prerendered: []
+      }))
+    );
+    registry.add(`${manifestOutputPath}/latest.json`);
+    registry.add(`${manifestOutputPath}/meta/test.json`);
+    registry.add(`${manifestOutputPath}/meta/dev.json`);
+    return {
+      // called after all tests with this env have been run
+      teardown() {
+        keys.forEach((key) => delete global[key]);
+        originals.forEach((v, k) => global[k] = v);
+        teardown();
+      }
+    };
+  }
+};
+
+export { index as default };

package/module.d.ts

@@ -0,0 +1 @@
+export { default } from './dist/module'