React Component Test Tools

7.1.3 verified Thu Apr 23 auth: no javascript

rc-test is a focused testing utility library designed for React components, primarily built as a wrapper and pre-configurator for Jest. It streamlines the setup of the testing environment for React projects by providing a customized Jest runner and re-exporting common Jest functions along with specific React component testing helpers. The current stable version is 7.1.3. Releases are typically driven by dependency updates, Jest compatibility fixes, and new utility additions, with a fairly active development cadence as indicated by recent minor version bumps. Its key differentiator lies in simplifying React testing boilerplate, addressing common environment issues like `jsdom` configurations and `ResizeObserver` mocks, and ensuring compatibility with various Jest versions, rather than introducing a new testing paradigm.

Common errors

error Error: Uncaught [TypeError: window.matchMedia is not a function] ↓

cause Jest's default `jsdom` environment does not provide `window.matchMedia` out of the box, which many UI libraries or components might rely on.

fix

Add a global mock for window.matchMedia in your Jest setup file. rc-test should handle common cases, but specific configurations might require manual intervention. Example:

Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation(query => ({ matches: false, media: query, onchange: null, addListener: jest.fn(), removeListener: jest.fn(), addEventListener: jest.fn(), removeEventListener: jest.fn(), dispatchEvent: jest.fn() })) });

error TypeError: (0 , _rcTest.createTest) is not a function ↓

cause Attempting to import `createTest` as a named export from the root `rc-test` package, but it is a default export from a specific sub-path (`rc-test/lib/createTest`).

fix

Change the import statement to import createTest from 'rc-test/lib/createTest';.

error jest.mock() must be in the global scope. See https://jestjs.io/docs/en/jest-api#jestmockmodulename-factory-options ↓

cause Calling `jest.mock()` inside a `describe` block or `test` function, which is not allowed by Jest.

fix

Move jest.mock() calls to the top level of the test file, outside of any describe or test blocks. If conditional mocking is needed, consider jest.doMock() within specific contexts.

Warnings

breaking Enzyme support has been removed, starting from version 7.0.12. Projects previously relying on Enzyme for component testing with `rc-test` will need to migrate to React Testing Library or similar solutions. ↓

fix Migrate your existing Enzyme tests to use React Testing Library (e.g., `@testing-library/react`). Update test files to use `render`, `screen`, `fireEvent`, etc., instead of Enzyme's `mount` or `shallow`.

breaking Compatibility adjustments for Jest 28 were introduced in version 7.0.15. Older test setups or specific Jest configurations might require updates to function correctly with Jest 28 and `rc-test`. ↓

fix Ensure your Jest configuration and dependencies are aligned with Jest 28 best practices. Refer to the Jest migration guide for any specific breaking changes relevant to your test suite.

gotcha `ResizeObserver` is often not available in `jsdom` environments, leading to errors in component tests that use it. `rc-test` adds a mock for `ResizeObserver` to prevent these issues. ↓

fix Ensure `rc-test` is correctly invoked to set up the testing environment. If you encounter `ResizeObserver` errors despite using `rc-test` (e.g., in a non-standard setup), you might need to manually add a global mock for `ResizeObserver` to your Jest setup files.

gotcha The `rc-test` package primarily acts as a CLI test runner that configures the Jest environment. While it re-exports some Jest functions and custom utilities, its main intended usage is via the command line. ↓

fix Run tests using `rc-test` via a script in `package.json` (e.g., `"test": "rc-test"`) rather than directly invoking `jest`. If importing utilities, ensure correct import paths as shown in the `imports` section.

Install

npm install rc-test

yarn add rc-test

pnpm add rc-test

Imports

createTest
wrong
```
import { createTest } from 'rc-test'; // Does not export directly from root
```
correct
```
import createTest from 'rc-test/lib/createTest';
```
The primary utility for programmatic test creation; it's a default export from its specific path. While 'rc-test' is often run as a CLI, specific utilities can be imported.
test
wrong
```
import test from 'rc-test/lib/test'; // This is a default export, but 'test' is also named export from root
```
correct
```
import { test } from 'rc-test';
```
Re-exports Jest's `test` function. Often used globally by Jest, but can be explicitly imported if preferred or necessary. Other Jest-like exports include `describe`, `it`, `expect`.

TestOptions

wrong

import { TestOptions } from 'rc-test'; // Type is not exported from root or as value

correct

import type { TestOptions } from 'rc-test/lib/createTest';

Type definition for configuring `createTest`. Important for TypeScript users to ensure type safety.

Quickstart

Demonstrates defining a simple React component test using `rc-test`'s `createTest` utility and running it via the CLI.

import { test, expect, render, screen } from '@testing-library/react';
import createTest from 'rc-test/lib/createTest';
import MyComponent from './MyComponent'; // Assume this exists for demonstration

// A basic React component for testing
function MyComponent({ name }) {
  return <div>Hello, {name || 'World'}!</div>;
}

// Using rc-test's createTest utility for structured tests
const { setup } = createTest();

describe('MyComponent with rc-test', () => {
  setup(); // Sets up render, cleanup, etc. from testing-library

  test('should render correctly with default name', () => {
    render(<MyComponent />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });

  test('should render correctly with a provided name', () => {
    render(<MyComponent name="Alice" />);
    expect(screen.getByText('Hello, Alice!')).toBeInTheDocument();
  });
});

// To run this test, add a script to package.json:
// {
//   "scripts": {
//     "test": "rc-test"
//   }
// }
// Then run: npm test OR yarn test OR pnpm test