https://github.com/pokujs/vue
A Poku plugin for Vue component testing with DOM adapters.
https://github.com/pokujs/vue
Last synced: 2 months ago
JSON representation
A Poku plugin for Vue component testing with DOM adapters.
- Host: GitHub
- URL: https://github.com/pokujs/vue
- Owner: pokujs
- License: mit
- Created: 2026-04-05T15:39:31.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-05T21:52:39.000Z (3 months ago)
- Last Synced: 2026-04-07T00:02:30.804Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 293 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @pokujs/vue
Enjoying **Poku**? [Give him a star to show your support](https://github.com/wellwelwel/poku) 🌟
---
📘 [**Documentation**](https://github.com/pokujs/vue#readme)
---
🧪 [**@pokujs/vue**](https://github.com/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
```bash
# Node.js
npm i -D @pokujs/vue
```
```bash
# Bun
bun add -d @pokujs/vue
```
```bash
# Deno (optional)
deno add npm:@pokujs/vue
```
Install a DOM adapter (at least one is required):
```bash
# happy-dom (recommended)
npm i -D happy-dom \
@happy-dom/global-registrator
```
```bash
# jsdom
npm i -D jsdom
```
### Enable the Plugin
```js
// poku.config.js
import { defineConfig } from 'poku';
import { vueTestingPlugin } from '@pokujs/vue/plugin';
export default defineConfig({
plugins: [
vueTestingPlugin({
dom: 'happy-dom',
}),
],
});
```
### Write Tests
```tsx
// 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(
Hello
);
assert.strictEqual(screen.getByRole('heading').textContent, 'Hello');
});
```
---
## Compatibility
### 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
```ts
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](./LICENSE)