🧪 @pokujs/react is a Poku plugin for React component testing with DOM adapters.
Tip
Render React components in isolated test files — automatic TSX loader injection, DOM environment setup, and optional render metrics included.
# Node.js
npm i -D @pokujs/react |
# Bun
bun add -d @pokujs/react |
# Deno (optional)
deno add npm:@pokujs/react |
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 |
// poku.config.js
import { defineConfig } from 'poku';
import { reactTestingPlugin } from '@pokujs/react/plugin';
export default defineConfig({
plugins: [
reactTestingPlugin({
dom: 'happy-dom',
}),
],
});// tests/my-component.test.tsx
import { afterEach, assert, test } from 'poku';
import { cleanup, render, screen } from '@pokujs/react';
afterEach(cleanup);
test('renders a heading', () => {
render(<h1>Hello</h1>);
assert.strictEqual(screen.getByRole('heading').textContent, 'Hello');
});| 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.
reactTestingPlugin({
/**
* 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);
},
},
});