Skip to content
Skillpedia
Testing40k · #5334

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

https://github.com/github/awesome-copilot/blob/main/skills/react19-test-patterns/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/github/awesome-copilot/blob/main/skills/react19-test-patterns/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
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-patterns

Or download just the file:

curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react19-test-patterns/SKILL.md -o SKILL.md
Technical 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:

  1. act import fix first, it unblocks everything else
  2. Simulate → fireEvent 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
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

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills