{"id":17888,"library":"rc-test","title":"React Component Test Tools","description":"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.","status":"active","version":"7.1.3","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/rc-test","tags":["javascript","react","test","typescript"],"install":[{"cmd":"npm install rc-test","lang":"bash","label":"npm"},{"cmd":"yarn add rc-test","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-test","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component testing","package":"react","optional":false},{"reason":"Peer dependency for rendering React components in a test environment","package":"react-dom","optional":false}],"imports":[{"note":"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.","wrong":"import { createTest } from 'rc-test'; // Does not export directly from root","symbol":"createTest","correct":"import createTest from 'rc-test/lib/createTest';"},{"note":"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`.","wrong":"import test from 'rc-test/lib/test'; // This is a default export, but 'test' is also named export from root","symbol":"test","correct":"import { test } from 'rc-test';"},{"note":"Type definition for configuring `createTest`. Important for TypeScript users to ensure type safety.","wrong":"import { TestOptions } from 'rc-test'; // Type is not exported from root or as value","symbol":"TestOptions","correct":"import type { TestOptions } from 'rc-test/lib/createTest';"}],"quickstart":{"code":"import { test, expect, render, screen } from '@testing-library/react';\nimport createTest from 'rc-test/lib/createTest';\nimport MyComponent from './MyComponent'; // Assume this exists for demonstration\n\n// A basic React component for testing\nfunction MyComponent({ name }) {\n  return <div>Hello, {name || 'World'}!</div>;\n}\n\n// Using rc-test's createTest utility for structured tests\nconst { setup } = createTest();\n\ndescribe('MyComponent with rc-test', () => {\n  setup(); // Sets up render, cleanup, etc. from testing-library\n\n  test('should render correctly with default name', () => {\n    render(<MyComponent />);\n    expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n  });\n\n  test('should render correctly with a provided name', () => {\n    render(<MyComponent name=\"Alice\" />);\n    expect(screen.getByText('Hello, Alice!')).toBeInTheDocument();\n  });\n});\n\n// To run this test, add a script to package.json:\n// {\n//   \"scripts\": {\n//     \"test\": \"rc-test\"\n//   }\n// }\n// Then run: npm test OR yarn test OR pnpm test","lang":"typescript","description":"Demonstrates defining a simple React component test using `rc-test`'s `createTest` utility and running it via the CLI."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":">=7.0.12"},{"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.","message":"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`.","severity":"breaking","affected_versions":">=7.0.15"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=7.1.2"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"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() })) });`","cause":"Jest's default `jsdom` environment does not provide `window.matchMedia` out of the box, which many UI libraries or components might rely on.","error":"Error: Uncaught [TypeError: window.matchMedia is not a function]"},{"fix":"Change the import statement to `import createTest from 'rc-test/lib/createTest';`.","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`).","error":"TypeError: (0 , _rcTest.createTest) is not a function"},{"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.","cause":"Calling `jest.mock()` inside a `describe` block or `test` function, which is not allowed by Jest.","error":"jest.mock() must be in the global scope. See https://jestjs.io/docs/en/jest-api#jestmockmodulename-factory-options"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}