Reakit Test Utilities

Common errors

• Error: `act` is not supported in the current environment.

  cause Using `act` outside of a React testing environment or with an outdated test setup that doesn't correctly wrap state updates, or if React's `act` is not properly shimmed/imported.
  fix Ensure `act` is imported from `reakit-test-utils` (or `@testing-library/react` if directly using it) and that your test runner (e.g., Jest) is configured correctly. For asynchronous operations, ensure you `await act(async () => { ... })`.

• TypeError: (0, _reakit_test_utils__WEBPACK_IMPORTED_MODULE_2__.render) is not a function

  cause Incorrect import of named exports or attempting to use CommonJS `require` syntax when the environment expects ESM, or vice-versa. Can also occur if the package is not installed or if bundler configuration is incorrect.
  fix Verify that `reakit-test-utils` is installed and ensure you are using named imports (e.g., `import { render } from 'reakit-test-utils'`). If you are migrating from Reakit to Ariakit, update imports to `@ariakit/test`.

Warnings

• breaking The `reakit-test-utils` package has been superseded by `@ariakit/test` due to the rebranding of Reakit to Ariakit. It is no longer actively maintained under this name, and developers should migrate to `@ariakit/test` for ongoing support, features, and bug fixes.
  Fix: Migrate your testing setup to use `@ariakit/test`. Install `@ariakit/test` and update import paths from `reakit-test-utils` to `@ariakit/test`. Refer to the Ariakit documentation for migration guides.
• gotcha This package was explicitly marked as 'experimental' in its README, indicating that it was subject to breaking changes even in minor versions. Relying on its specific API or behavior for long-term projects could lead to unexpected issues.
  Fix: For new projects or existing ones, use `@ariakit/test` which, although also marked experimental in its early stages, is the actively developed successor.
• gotcha Peer dependency ranges for `react` and `react-dom` are restricted to `^16.8.0 || ^17.0.0`. Using this package with React 18 or newer may lead to peer dependency warnings or runtime issues, as it hasn't been officially updated to support them.
  Fix: If unable to migrate to `@ariakit/test`, you may need to use `--legacy-peer-deps` with npm 7+ or ensure your React version matches the specified ranges. However, the recommended fix is migration to `@ariakit/test` which has been updated to support newer React versions.

Install

• npm install reakit-test-utils npm
• yarn add reakit-test-utils yarn
• pnpm add reakit-test-utils pnpm

Imports

• render
  wrong:

  const { render } = require('reakit-test-utils')

  correct:

  import { render } from 'reakit-test-utils'

  Primary utility for rendering React components into the DOM for testing, often re-exporting from `@testing-library/react`. This package has been superseded by `@ariakit/test`.
• fireEvent
  wrong:

  import fireEvent from 'reakit-test-utils'

  correct:

  import { fireEvent } from 'reakit-test-utils'

  Simulates DOM events. It's a named export, not a default export. For active development, consider migrating to `@ariakit/test` which offers similar utilities.
• act
  wrong:

  import { act } from '@testing-library/react'

  correct:

  import { act } from 'reakit-test-utils'

  Ensures all updates related to a test assertion are processed before assertions run, preventing warnings in React 16.8+ testing. While `@testing-library/react` also exports `act`, using the one from `reakit-test-utils` (if re-exported) is recommended for consistency. This package is effectively abandoned; consider `@ariakit/test`.

Quickstart

Demonstrates rendering a simple React component and interacting with it using `fireEvent` and `act` to test state changes, typical for UI component testing. This example assumes a Jest and `@testing-library/jest-dom` setup.

import * as React from 'react';
import { render, fireEvent, act } from 'reakit-test-utils';
// You would also need @testing-library/jest-dom for toBeInTheDocument
// import '@testing-library/jest-dom'; 

const Counter = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

describe('Counter Component', () => {
  it('should increment the count when button is clicked', async () => {
    const { getByText } = render(<Counter />);

    const incrementButton = getByText('Increment');
    const countDisplay = getByText('Count: 0');

    expect(countDisplay).toBeInTheDocument();

    await act(async () => {
      fireEvent.click(incrementButton);
    });

    expect(getByText('Count: 1')).toBeInTheDocument();
  });
});