react19-test-patterns
Has your agent update test files to be compatible with React 19. This ensures tests continue to work and verify code correctly.
What it does
This guide helps you update your code tests to work with the new React version (React 19). It shows how to fix specific parts of your test code that stopped working or have changed.
When to use it
- ✓When you are updating your project to React 19.
- ✓When your tests that used React 18 start failing after the update.
- ✓When you see error messages about 'act' or 'Simulate' in your tests.
Example of what to ask your AI
“How do I update my tests for React 19?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The guide provides 'before' and 'after' examples for each necessary change. You replace the old code with the new code shown in the examples to fix your tests.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add github/awesome-copilot --skill react19-test-patternsOr download just the file:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react19-test-patterns/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
React 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
FAQ
What is 'act'?
'act' is a function used in tests to ensure UI updates happen before you check the result. In React 19, how you import 'act' has changed.
What is 'Simulate'?
'Simulate' was a way to mimic user actions (like clicks or typing) in tests. In React 19, this has been replaced by 'fireEvent'.
Why do my tests call functions twice in React 19?
In React 19, 'StrictMode' (a mode to help find bugs) no longer calls certain functions (like `useEffect`) twice in development. You need to adjust your call counts in tests to reflect this.
Details
Original description by the author
Provides before/after patterns for migrating test files to React 19 compatibility, including act() imports, Simulate removal, and StrictMode call count changes.
repo: github/awesome-copilot
Popularity
- GitHub stars
- 40k
- Ranking position
- #5334
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
acquire-codebase-knowledge
Helps your agent understand and document an existing code project. It's useful for onboarding new people or getting an overview of the architecture.
github/awesome-copilot
acreadiness-assess
Enables your agent to assess a project's readiness for AI and generate a report. It's useful for understanding how well a project is prepared to use AI tools.
github/awesome-copilot
acreadiness-generate-instructions
Helps your agent create instructions for AI tools based on an assessment. It's useful for improving how AI interacts with code and closing identified gaps.
github/awesome-copilot
acreadiness-policy
Enables your agent to help define or apply policies for AI project assessment. It's useful for standardizing how projects are evaluated and ensuring compliance.
github/awesome-copilot
Similar skills
cpp-testing
Makes your agent write and improve tests for C++ code. It helps set up testing tools and fix errors.
affaan-m/ECC
csharp-testing
Helps your agent create tests for C# and .NET code. It uses best practices to ensure tests are efficient and reliable.
affaan-m/ECC
django-tdd
Enables your agent to apply testing strategies for Django with pytest-django and TDD. It's useful for writing robust tests and ensuring code quality, especially for DRF APIs.
affaan-m/ECC