vitest-browser-vue 2.0.1 → 2.1.0

package/README.md

@@ -9,7 +9,7 @@ import { render } from 'vitest-browser-vue'
 import { expect, test } from 'vitest'
 
 test('counter button increments the count', async () => {
-  const screen = render(Component, {
+  const screen = await render(Component, {
     props: {
       initialCount: 1,
     }
@@ -44,7 +44,7 @@ export default defineConfig({
 import { page } from 'vitest/browser'
 
 test('counter button increments the count', async () => {
-  const screen = page.render(Component, {
+  const screen = await page.render(Component, {
     props: {
       initialCount: 1,
     }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { a as render, i as config, n as RenderResult, r as cleanup, t as ComponentRenderOptions } from "./pure-Dp75WA7l.js";
+import { a as render, i as config, n as RenderResult, r as cleanup, t as ComponentRenderOptions } from "./pure-B6xBGwMp.js";
 
 //#region src/index.d.ts
 declare module "vitest/browser" {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { n as config, r as render, t as cleanup } from "./pure-DYF3m9PV.js";
+import { n as config, r as render, t as cleanup } from "./pure-epEwB8Ps.js";
 import { page } from "vitest/browser";
 import { beforeEach } from "vitest";
 

package/dist/{pure-Dp75WA7l.d.ts → pure-B6xBGwMp.d.ts}

@@ -3,7 +3,7 @@ import { ComponentMountingOptions, config } from "@vue/test-utils";
 import { DefineComponent } from "vue";
 
 //#region src/pure.d.ts
-type ComponentProps<T$1> = T$1 extends (new (...angs: any) => {
+type ComponentProps<T$1> = T$1 extends (new (...args: any) => {
   $props: infer P;
 }) ? NonNullable<P> : T$1 extends ((props: infer P, ...args: any) => any) ? P : {};
 interface RenderResult<Props$1> extends LocatorSelectors {
@@ -11,22 +11,41 @@ interface RenderResult<Props$1> extends LocatorSelectors {
   baseElement: HTMLElement;
   locator: Locator;
   debug(el?: HTMLElement | HTMLElement[] | Locator | Locator[], maxLength?: number, options?: PrettyDOMOptions): void;
-  unmount(): void;
+  /**
+  * Unmount the component. Also records a `vue.unmount` trace mark.
+  *
+  * Synchronous usage is deprecated and will be removed in the next major version.
+  * Please use `await unmount()` instead of `unmount()`.
+  */
+  unmount(): Promise<void>;
   emitted<T = unknown>(): Record<string, T[]>;
   emitted<T = unknown[]>(eventName: string): undefined | T[];
-  rerender(props: Partial<Props$1>): void;
+  /**
+  * Update the component props. Also records a `vue.rerender` trace mark.
+  *
+  * Synchronous usage is deprecated and will be removed in the next major version.
+  * Please use `await rerender(props)` instead of `rerender(props)`.
+  */
+  rerender(props: Partial<Props$1>): Promise<void>;
 }
 interface ComponentRenderOptions<C, P$1 extends ComponentProps<C>> extends ComponentMountingOptions<C, P$1> {
   container?: HTMLElement;
   baseElement?: HTMLElement;
 }
+/**
+* Render a Vue component into the document.
+* Also records a `vue.render` trace mark.
+*
+* Synchronous usage is deprecated and will be removed in the next major version.
+* Please use `await render(Component)` instead of `render(Component)`.
+*/
 declare function render<T$1, C = (T$1 extends ((...args: any) => any) | (new (...args: any) => any) ? T$1 : T$1 extends {
   props?: infer Props;
 } ? DefineComponent<Props extends Readonly<(infer PropNames)[]> | (infer PropNames)[] ? { [key in PropNames extends string ? PropNames : string]?: any } : Props> : DefineComponent), P$1 extends ComponentProps<C> = ComponentProps<C>>(Component: T$1, {
   container: customContainer,
   baseElement: customBaseElement,
   ...mountOptions
-}?: ComponentRenderOptions<C, P$1>): RenderResult<P$1>;
+}?: ComponentRenderOptions<C, P$1>): RenderResult<P$1> & PromiseLike<RenderResult<P$1>>;
 declare function cleanup(): void;
 //#endregion
 export { render as a, config as i, RenderResult as n, cleanup as r, ComponentRenderOptions as t };

package/dist/pure-epEwB8Ps.js

@@ -0,0 +1,77 @@
+import { page, server, utils } from "vitest/browser";
+import { config, mount } from "@vue/test-utils";
+
+//#region src/pure.ts
+const { debug, getElementLocatorSelectors } = utils;
+const mountedWrappers = /* @__PURE__ */ new Set();
+let idx = 0;
+function ensureTestIdAttribute(element) {
+	const attributeId = server.config.browser.locators.testIdAttribute;
+	if (!element.hasAttribute(attributeId)) element.setAttribute(attributeId, `__vitest_${idx++}__`);
+}
+/**
+* Render a Vue component into the document.
+* Also records a `vue.render` trace mark.
+*
+* Synchronous usage is deprecated and will be removed in the next major version.
+* Please use `await render(Component)` instead of `render(Component)`.
+*/
+function render(Component, { container: customContainer, baseElement: customBaseElement,...mountOptions } = {}) {
+	const baseElement = customBaseElement || customContainer || document.body;
+	const container = customContainer || baseElement.appendChild(document.createElement("div"));
+	ensureTestIdAttribute(baseElement);
+	ensureTestIdAttribute(container);
+	if (mountOptions.attachTo) throw new Error("`attachTo` is not supported, use `container` instead");
+	const wrapper = mount(Component, {
+		...mountOptions,
+		attachTo: container
+	});
+	unwrapNode(wrapper.parentElement);
+	mountedWrappers.add(wrapper);
+	const renderResult = {
+		container,
+		baseElement,
+		locator: page.elementLocator(container),
+		debug: (el = baseElement, maxLength, options) => debug(el, maxLength, options),
+		unmount: () => {
+			wrapper.unmount();
+			return markThenable(renderResult.locator, "vue.unmount", renderResult.unmount, void 0);
+		},
+		emitted: ((name) => wrapper.emitted(name)),
+		rerender: async (props) => {
+			await wrapper.setProps(props);
+			return markThenable(renderResult.locator, "vue.rerender", renderResult.rerender, void 0);
+		},
+		...getElementLocatorSelectors(baseElement)
+	};
+	return {
+		...renderResult,
+		...markThenable(renderResult.locator, "vue.render", render, renderResult)
+	};
+}
+function markThenable(locator, name, fn, value) {
+	if (!locator.mark) return Promise.resolve(value);
+	const error = new Error(name);
+	if ("captureStackTrace" in Error) Error.captureStackTrace(error, fn);
+	return { async then(onfulfilled, onrejected) {
+		try {
+			await locator.mark(name, error);
+			return Promise.resolve(value).then(onfulfilled, onrejected);
+		} catch (e) {
+			return Promise.reject(e).then(onfulfilled, onrejected);
+		}
+	} };
+}
+function cleanup() {
+	mountedWrappers.forEach((wrapper) => {
+		if (wrapper.element?.parentNode?.parentNode === document.body) document.body.removeChild(wrapper.element.parentNode);
+		wrapper.unmount();
+		mountedWrappers.delete(wrapper);
+	});
+}
+function unwrapNode(node) {
+	node.replaceWith(...node.childNodes);
+}
+
+//#endregion
+export { config as n, render as r, cleanup as t };

package/dist/pure.d.ts

@@ -1,2 +1,2 @@
-import { a as render, i as config, n as RenderResult, r as cleanup, t as ComponentRenderOptions } from "./pure-Dp75WA7l.js";
+import { a as render, i as config, n as RenderResult, r as cleanup, t as ComponentRenderOptions } from "./pure-B6xBGwMp.js";
 export { ComponentRenderOptions, RenderResult, cleanup, config, render };

package/dist/pure.js

@@ -1,3 +1,3 @@
-import { n as config, r as render, t as cleanup } from "./pure-DYF3m9PV.js";
+import { n as config, r as render, t as cleanup } from "./pure-epEwB8Ps.js";
 
 export { cleanup, config, render };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitest-browser-vue",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Render Vue components in Vitest Browser Mode",
   "author": "Vitest Community",
   "license": "MIT",
@@ -48,16 +48,17 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.24.1",
+    "@playwright/test": "^1.58.2",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/browser-playwright": "^4.0.2",
+    "@vitest/browser-playwright": "4.1.0-beta.6",
     "bumpp": "^9.4.2",
     "changelogithub": "^0.13.9",
     "eslint": "^9.8.0",
-    "playwright": "^1.55.1",
+    "playwright": "^1.58.2",
     "tsdown": "^0.15.9",
     "tsx": "^4.16.5",
     "typescript": "^5.5.4",
-    "vitest": "^4.0.2",
+    "vitest": "4.1.0-beta.6",
     "vue": "^3.4.35",
     "zx": "^8.1.4"
   },

package/dist/pure-DYF3m9PV.js

@@ -1,41 +0,0 @@
-import { page, utils } from "vitest/browser";
-import { config, mount } from "@vue/test-utils";
-
-//#region src/pure.ts
-const { debug, getElementLocatorSelectors } = utils;
-const mountedWrappers = /* @__PURE__ */ new Set();
-function render(Component, { container: customContainer, baseElement: customBaseElement,...mountOptions } = {}) {
-	const div = document.createElement("div");
-	const baseElement = customBaseElement || customContainer || document.body;
-	const container = customContainer || baseElement.appendChild(div);
-	if (mountOptions.attachTo) throw new Error("`attachTo` is not supported, use `container` instead");
-	const wrapper = mount(Component, {
-		...mountOptions,
-		attachTo: container
-	});
-	unwrapNode(wrapper.parentElement);
-	mountedWrappers.add(wrapper);
-	return {
-		container,
-		baseElement,
-		locator: page.elementLocator(container),
-		debug: (el = baseElement, maxLength, options) => debug(el, maxLength, options),
-		unmount: () => wrapper.unmount(),
-		emitted: ((name) => wrapper.emitted(name)),
-		rerender: (props) => wrapper.setProps(props),
-		...getElementLocatorSelectors(baseElement)
-	};
-}
-function cleanup() {
-	mountedWrappers.forEach((wrapper) => {
-		if (wrapper.element?.parentNode?.parentNode === document.body) document.body.removeChild(wrapper.element.parentNode);
-		wrapper.unmount();
-		mountedWrappers.delete(wrapper);
-	});
-}
-function unwrapNode(node) {
-	node.replaceWith(...node.childNodes);
-}
-
-//#endregion
-export { config as n, render as r, cleanup as t };