Catalog
github/react19-test-patterns

github

react19-test-patterns

Provides before/after patterns for migrating test files to React 19 compatibility, including act() imports, Simulate removal, and StrictMode call count changes.

v1.0Latest
New~776Updated Jun 26, 2026

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
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
Files1
1 files · 1.0 KB

Select a file to preview

Overall Score

82/100

Grade

B

Good

Safety

95

Quality

82

Clarity

85

Completeness

72

Summary

A reference guide for migrating React test files to React 19 compatibility, covering import changes (act from react vs react-dom/test-utils), event handling (fireEvent replacing Simulate), and StrictMode behavior changes. The skill provides before/after code patterns and a systematic priority order for applying migrations.

Detected Capabilities

code pattern referenceimport migration guidanceassertion update instructionsAPI mapping table

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

react 19 test migrationfix act importstrictmode call countsreact-dom test-utilssimulate to fireevent

Use Cases

  • Migrate test files to React 19
  • Update act imports across codebase
  • Replace Simulate with fireEvent
  • Fix StrictMode call count assertions
  • Remove deprecated react-dom/test-utils
  • Verify custom render helpers for React 19

Quality Notes

  • Clear priority order helps developers understand dependency chain between migrations
  • Comprehensive API mapping table (section 3) provides direct before/after lookup for all deprecated APIs
  • Practical bash command example for measuring actual StrictMode call counts instead of guessing
  • Well-structured sections with concrete code examples for each migration pattern
  • Explicitly documents StrictMode behavior difference (effects single-invoke in React 19 vs double-invoke in React 18)
  • License file included but not referenced in content
  • Missing guidance on testing library integration testing patterns beyond basic event simulation
  • No examples of common edge cases (async state updates, cleanup functions, concurrent features)
Model: claude-haiku-4-5-20251001Analyzed: Jun 26, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Use github/react19-test-patterns in your dev environment

Command Palette

Search for a command to run...