@pokujs/vue

Enjoying Poku? Give him a star to show your support 🌟

---

📘 Documentation

---

🧪 @pokujs/vue is a Poku plugin for Vue component testing with DOM adapters.

Tip

Render Vue components in isolated test files — automatic TSX loader injection, DOM environment setup, and optional render metrics included.

---

Quickstart

Install

# Node.js npm i -D @pokujs/vue

# Bun bun add -d @pokujs/vue

# Deno (optional) deno add npm:@pokujs/vue

Install a DOM adapter (at least one is required):

# happy-dom (recommended) npm i -D happy-dom \ @happy-dom/global-registrator

# jsdom npm i -D jsdom

Enable the Plugin

// poku.config.js
import { defineConfig } from 'poku';
import { vueTestingPlugin } from '@pokujs/vue/plugin';

export default defineConfig({
  plugins: [
    vueTestingPlugin({
      dom: 'happy-dom',
    }),
  ],
});

Write Tests

// tests/my-component.test.tsx
import { afterEach, assert, test } from 'poku';
import { cleanup, render, screen } from '@pokujs/vue';

afterEach(cleanup);

test('renders a heading', () => {
  render(<h1>Hello</h1>);
  assert.strictEqual(screen.getByRole('heading').textContent, 'Hello');
});

---

Compatibility

Library Support

Package	Supported range
vue	>=3.4
poku	>=4.1.0
happy-dom	>=20
jsdom	>=22

Isolation Support

Isolation mode	Node validation
none	✅
process	✅

Scoped cleanup now mirrors the React and Angular adapters, which means Vue component trees mounted in one concurrent test no longer share a global cleanup set with sibling tests.

Multi-Major Suite

Use this suite to verify Vue major compatibility locally:

npm run test:multi-major

It executes the full adapter tests twice, pinning Vue 3.4 and Vue 3.5 (with matching @vue/compiler-sfc).

Runtime × DOM Adapter

	Node.js ≥ 20	Bun ≥ 1	Deno ≥ 2
happy-dom	✅	✅	✅
jsdom	✅	✅	⚠️
custom setup	✅	✅	✅

Note

jsdom under Deno may be unstable depending on Deno's npm compatibility layer for the current jsdom version. For Deno projects, prefer happy-dom.

---

Options

vueTestingPlugin({
  /**
   * DOM adapter to use. Defaults to 'happy-dom'.
   * - 'happy-dom'       — fast, recommended for most tests
   * - 'jsdom'           — broader browser API coverage
   * - { setupModule }   — path to a custom DOM setup module
   */
  dom: 'happy-dom',

  /** Base URL assigned to the DOM environment. */
  domUrl: 'http://localhost:3000/',

  /**
   * Render metrics. Disabled by default.
   * Pass `true` for defaults, or an object for fine-grained control.
   */
  metrics: {
    enabled: true,
    topN: 5,
    minDurationMs: 0,
    reporter(summary) {
      console.log(summary.topSlowest);
    },
  },
});

---

License

MIT