@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