vitest-browser-vue 2.0.2 → 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-CE5Uqrcq.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-DJ28KYrc.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-CE5Uqrcq.d.ts → pure-B6xBGwMp.d.ts}

@@ -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-DJ28KYrc.js → pure-epEwB8Ps.js}

@@ -9,6 +9,13 @@ 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"));
@@ -21,16 +28,39 @@ function render(Component, { container: customContainer, baseElement: customBase
 	});
 	unwrapNode(wrapper.parentElement);
 	mountedWrappers.add(wrapper);
-	return {
+	const renderResult = {
 		container,
 		baseElement,
 		locator: page.elementLocator(container),
 		debug: (el = baseElement, maxLength, options) => debug(el, maxLength, options),
-		unmount: () => wrapper.unmount(),
+		unmount: () => {
+			wrapper.unmount();
+			return markThenable(renderResult.locator, "vue.unmount", renderResult.unmount, void 0);
+		},
 		emitted: ((name) => wrapper.emitted(name)),
-		rerender: (props) => wrapper.setProps(props),
+		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) => {

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-CE5Uqrcq.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-DJ28KYrc.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.2",
+  "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.18",
+    "@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.18",
+    "vitest": "4.1.0-beta.6",
     "vue": "^3.4.35",
     "zx": "^8.1.4"
   },