vitest-browser-vue 0.0.1

package/README.md

@@ -0,0 +1,59 @@
+# vitest-browser-vue
+
+Render Vue components in Vitest Browser Mode. This library follows `testing-library` principles and exposes only [locators](https://vitest.dev/guide/browser/locators) and utilities that encourage you to write tests that closely resemble how your Vue components are used.
+
+Requires `vitest` and `@vitest/browser` 2.1.0 or higher.
+
+```ts
+import { render } from 'vitest-browser-vue'
+import { expect, test } from 'vitest'
+
+test('counter button increments the count', async () => {
+  const screen = render(Component, {
+    props: {
+      initialCount: 1,
+    }
+  })
+
+  await screen.getByRole('button', { name: 'Increment' }).click()
+
+  await expect.element(screen.getByText('Count is 2')).toBeVisible()
+})
+```
+
+`vitest-browser-vue` also automatically injects `render` and `cleanup` methods on the `page`. Example:
+
+```ts
+// vitest.config.ts
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    // if the types are not picked up, add `vitest-browser-vue` to
+    // "compilerOptions.types" in your tsconfig or
+    // import `vitest-browser-vue` manually so TypeScript can pick it up
+    setupFiles: ['vitest-browser-vue'],
+  },
+})
+```
+
+```ts
+import { page } from '@vitest/browser/context'
+
+test('counter button increments the count', async () => {
+  const screen = page.render(Component, {
+    props: {
+      initialCount: 1,
+    }
+  })
+
+  screen.cleanup()
+})
+```
+
+Unlike `@testing-library/vue`, `vitest-browser-vue` cleans up the component before the test starts instead of after, so you can see the rendered result in your UI. To avoid auto-cleanup, import the `render` function from `vitest-browser-vue/pure`.
+
+## Special thanks
+
+- Powered by [`@vue/test-utils`](https://github.com/vuejs/test-utils/)
+- Inspired by [`@testing-library/vue`](https://github.com/testing-library/vue-testing-library)

package/dist/chunk-S4673CTL.js

@@ -0,0 +1,48 @@
+// src/pure.ts
+import { mount } from "@vue/test-utils";
+import { debug, getElementLocatorSelectors } from "@vitest/browser/utils";
+var 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,
+    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);
+}
+
+export {
+  render,
+  cleanup
+};

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { render } from './pure.js';
+export { ComponentRenderOptions, RenderResult, cleanup } from './pure.js';
+import '@vitest/browser/context';
+import '@vue/test-utils';
+import 'vue';
+import '@vitest/browser/utils';
+
+declare module '@vitest/browser/context' {
+    interface BrowserPage {
+        render: typeof render;
+    }
+}
+
+export { render };

package/dist/index.js

@@ -0,0 +1,19 @@
+import {
+  cleanup,
+  render
+} from "./chunk-S4673CTL.js";
+
+// src/index.ts
+import { page } from "@vitest/browser/context";
+import { beforeEach } from "vitest";
+page.extend({
+  render,
+  [Symbol.for("vitest:component-cleanup")]: cleanup
+});
+beforeEach(() => {
+  cleanup();
+});
+export {
+  cleanup,
+  render
+};

package/dist/pure.d.ts

@@ -0,0 +1,29 @@
+import { LocatorSelectors, Locator } from '@vitest/browser/context';
+import { ComponentMountingOptions } from '@vue/test-utils';
+import { DefineComponent } from 'vue';
+import { PrettyDOMOptions } from '@vitest/browser/utils';
+
+type ComponentProps<T> = T extends new (...angs: any) => {
+    $props: infer P;
+} ? NonNullable<P> : T extends (props: infer P, ...args: any) => any ? P : {};
+interface RenderResult<Props> extends LocatorSelectors {
+    container: HTMLElement;
+    baseElement: HTMLElement;
+    debug(el?: HTMLElement | HTMLElement[] | Locator | Locator[], maxLength?: number, options?: PrettyDOMOptions): void;
+    unmount(): void;
+    emitted<T = unknown>(): Record<string, T[]>;
+    emitted<T = unknown[]>(eventName: string): undefined | T[];
+    rerender(props: Partial<Props>): void;
+}
+interface ComponentRenderOptions<C, P extends ComponentProps<C>> extends ComponentMountingOptions<C, P> {
+    container?: HTMLElement;
+    baseElement?: HTMLElement;
+}
+declare function render<T, C = T extends ((...args: any) => any) | (new (...args: any) => any) ? T : T extends {
+    props?: infer Props;
+} ? DefineComponent<Props extends Readonly<(infer PropNames)[]> | (infer PropNames)[] ? {
+    [key in PropNames extends string ? PropNames : string]?: any;
+} : Props> : DefineComponent, P extends ComponentProps<C> = ComponentProps<C>>(Component: T, { container: customContainer, baseElement: customBaseElement, ...mountOptions }?: ComponentRenderOptions<C, P>): RenderResult<P>;
+declare function cleanup(): void;
+
+export { type ComponentRenderOptions, type RenderResult, cleanup, render };

package/dist/pure.js

@@ -0,0 +1,8 @@
+import {
+  cleanup,
+  render
+} from "./chunk-S4673CTL.js";
+export {
+  cleanup,
+  render
+};

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "vitest-browser-vue",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "Render Vue components in Vitest Browser Mode",
+  "author": "Vitest Team",
+  "license": "MIT",
+  "funding": "https://opencollective.com/vitest",
+  "homepage": "https://github.com/vitest-dev/vitest-browser-vue#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vitest-dev/vitest-browser-vue.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vitest-dev/vitest-browser-vue/issues"
+  },
+  "keywords": [
+    "vue",
+    "vitest",
+    "browser",
+    "testing"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./pure": {
+      "types": "./dist/pure.d.ts",
+      "default": "./dist/pure.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "*.d.ts",
+    "*.mjs",
+    "dist"
+  ],
+  "engines": {
+    "node": "^18.0.0 || >=20.0.0"
+  },
+  "peerDependencies": {
+    "@vitest/browser": "^2.1.0-beta.4",
+    "vitest": "^2.1.0-beta.4",
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@vue/test-utils": "^2.4.6"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.24.1",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitest/browser": "^2.1.0-beta.4",
+    "bumpp": "^9.4.2",
+    "changelogithub": "^0.13.9",
+    "eslint": "^9.8.0",
+    "playwright": "^1.46.0",
+    "tsup": "^8.2.4",
+    "tsx": "^4.16.5",
+    "typescript": "^5.5.4",
+    "vitest": "^2.1.0-beta.4",
+    "vue": "^3.4.35",
+    "zx": "^8.1.4"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --sourcemap",
+    "test": "vitest",
+    "publish-ci": "tsx scripts/publish-ci.ts",
+    "release": "tsx scripts/release.ts",
+    "lint": "eslint --cache .",
+    "lint:fix": "pnpm lint --fix"
+  }
+}