Test utils overview

Testing utilities for Preact components

The preact/test-utils package provides utilities to help test Preact components in a test environment.

Installation

npm

npm install --save-dev preact

Importing

import { setupRerender, act, teardown } from 'preact/test-utils';

Available utilities

The test-utils package exports three main functions:

setupRerender

Set up synchronous rendering for tests

act

Flush effects and renders in tests

teardown

Clean up test environment

Basic usage

import { render } from 'preact';
import { setupRerender, act, teardown } from 'preact/test-utils';
import { expect, test, afterEach } from 'vitest';

// Set up synchronous rendering
const rerender = setupRerender();

afterEach(() => {
  // Clean up after each test
  teardown();
});

test('component updates', async () => {
  let container = document.createElement('div');
  
  await act(() => {
    render(<MyComponent />, container);
  });
  
  // Component is rendered and effects are flushed
  expect(container.innerHTML).toBe('<div>Hello</div>');
});

Source reference

Implementation: test-utils/src/index.js

Type definitions: test-utils/src/index.d.ts

Related

• Testing guide
• setupRerender API
• act API