
React 19 Test Migration Patterns
OfficialFreeMigrate your React test files to version 19 seamlessly.
Free · Opens the source repo
What React 19 Test Migration Patterns does
React 19 introduces significant changes that affect how tests are written and executed. This skill provides a comprehensive reference for developers looking to update their test files to ensure compatibility with React 19. It outlines a clear priority order for making necessary adjustments, starting with the import of act, which is crucial for the migration process. By following the provided patterns, developers can systematically address the changes required in their test files, ensuring a smoother transition to the latest version of React.
The skill includes detailed examples of how to replace deprecated imports and methods, such as switching from Simulate to fireEvent, which is now part of the @testing-library/react. This change not only aligns with React 19's best practices but also improves the overall testing experience by utilizing more modern utilities. Additionally, the skill emphasizes the importance of updating assertions related to StrictMode and provides strategies for measuring call counts accurately, which is essential for maintaining reliable tests.
This skill is particularly useful for developers who are maintaining or updating large codebases that rely on React. By following the migration patterns and examples, they can ensure that their tests remain functional and effective in the new environment. Whether you are working on a new project or updating an existing one, this skill serves as a valuable resource for navigating the complexities of React 19's testing requirements.
When to use it
Use this skill when you are updating test files for a project that is migrating to React 19.
When not to use it
This skill is not suitable for projects that are not using React or for tests that do not need to be updated for React 19.
What you can build with it
Updating a Legacy Codebase
If you have a legacy React application, this skill helps you systematically update your test files to be compatible with React 19.
Preparing for a React Upgrade
Before upgrading to React 19, use this skill to ensure all your tests are compliant with the new requirements.
Training New Developers
Use this skill as a reference guide for onboarding new developers who need to understand the testing changes in React 19.
How to install React 19 Test Migration Patterns
View source1. Install with the skills CLI
npx skills add github/awesome-copilot/react19-test-patterns --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by githubReact 19 Test Migration Patterns
Reference for all test file migrations required by React 19.
Priority Order
Fix test files in this order; each layer depends on the previous:
actimport fix first, it unblocks everything elseSimulate→fireEventfix immediately after act- Full react-dom/test-utils cleanup remove remaining imports
- StrictMode call counts measure actual, don't guess
- Async act wrapping for remaining "not wrapped in act" warnings
- Custom render helper verify once per codebase, not per test
1. act() Import Fix
// Before REMOVED in React 19:
import { act } from 'react-dom/test-utils';
// After:
import { act } from 'react';
If mixed with other test-utils imports:
// Before:
import { act, Simulate, renderIntoDocument } from 'react-dom/test-utils';
// After split the imports:
import { act } from 'react';
import { fireEvent, render } from '@testing-library/react'; // replaces Simulate + renderIntoDocument
2. Simulate → fireEvent
// Before Simulate REMOVED in React 19:
import { Simulate } from 'react-dom/test-utils';
Simulate.click(element);
Simulate.change(input, { target: { value: 'hello' } });
Simulate.submit(form);
Simulate.keyDown(element, { key: 'Enter', keyCode: 13 });
// After:
import { fireEvent } from '@testing-library/react';
fireEvent.click(element);
fireEvent.change(input, { target: { value: 'hello' } });
fireEvent.submit(form);
fireEvent.keyDown(element, { key: 'Enter', keyCode: 13 });
3. react-dom/test-utils Full API Map
| Old (react-dom/test-utils) | New location |
|---|---|
act | import { act } from 'react' |
Simulate | fireEvent from @testing-library/react |
renderIntoDocument | render from @testing-library/react |
findRenderedDOMComponentWithTag | getByRole, getByTestId from RTL |
findRenderedDOMComponentWithClass | getByRole or container.querySelector |
scryRenderedDOMComponentsWithTag | getAllByRole from RTL |
isElement, isCompositeComponent | Remove not needed with RTL |
isDOMComponent | Remove |
4. StrictMode Call Count Fixes
React 19 StrictMode no longer double-invokes useEffect in development. Spy assertions counting effect calls must be updated.
Strategy always measure, never guess:
# Run the failing test, read the actual count from the error:
npm test -- --watchAll=false --testPathPattern="[filename]" --forceExit 2>&1 | grep -E "Expected|Received"
// Before (React 18 StrictMode effects ran twice):
expect(mockFn).toHaveBeenCalledTimes(2); // 1 call × 2 (strict double-invoke)
// After (React 19 StrictMode effects run once):
expect(mockFn).toHaveBeenCalledTimes(1);
// Render-phase calls (component body) still double-invoked in React 19 StrictMode:
expect(renderSpy).toHaveBeenCalledTimes(2); // stays at 2 for render body calls
Frequently asked questions about React 19 Test Migration Patterns
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.
