@pokujs/react

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

📘 Documentation

🧪 @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.

Quickstart

Install

# 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

Enable the Plugin

// poku.config.js
import { defineConfig } from 'poku';
import { reactTestingPlugin } from '@pokujs/react/plugin';

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

Write Tests

// 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');
});

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

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);
    },
  },
});

License

MIT