New to Claude Skills? Learn how to install them →

github on GitHub

React 19 Test Migration Patterns

OfficialFree

Migrate your React test files to version 19 seamlessly.

by github37.7k stars on github/awesome-copilot
4 views
Updated Aug 10, 2026
Get this skill

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 source

1. Install with the skills CLI

npx skills add github/awesome-copilot/react19-test-patterns --agent claude-code

2. 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 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:

  1. act import fix first, it unblocks everything else
  2. SimulatefireEvent fix immediately after act
  3. Full react-dom/test-utils cleanup remove remaining imports
  4. StrictMode call counts measure actual, don't guess
  5. Async act wrapping for remaining "not wrapped in act" warnings
  6. 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
actimport { act } from 'react'
SimulatefireEvent from @testing-library/react
renderIntoDocumentrender from @testing-library/react
findRenderedDOMComponentWithTaggetByRole, getByTestId from RTL
findRenderedDOMComponentWithClassgetByRole or container.querySelector
scryRenderedDOMComponentsWithTaggetAllByRole from RTL
isElement, isCompositeComponentRemove not needed with RTL
isDOMComponentRemove

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