react19-test-patterns

โดย github

ให้รูปแบบ before/after สำหรับการย้ายไฟล์ทดสอบไปยังความเข้ากันได้กับ React 19 รวมถึงการนำเข้า act(), การลบ Simulate และการเปลี่ยนแปลงจำนวนการเรียก StrictMode

npx skills add https://github.com/github/awesome-copilot --skill react19-test-patterns

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

Skills เพิ่มเติมจาก github

console-rendering
github
คำแนะนำสำหรับการใช้ระบบเรนเดอร์คอนโซลที่ใช้ struct tag ใน Go
official
github-pr-query
github
สอบถาม Pull Request บน GitHub อย่างมีประสิทธิภาพ พร้อมรองรับการกรองด้วยอาร์กิวเมนต์ jq
official
jqschema
github
ยูทิลิตี้ค้นพบสคีมา JSON ที่แยกข้อมูลโครงสร้างและประเภทจากข้อมูล JSON
official
gh-agent-session
github
ส่วนขยายเซสชันเอเจนต์ CLI ของ GitHub
official
gh-agent-task
github
ส่วนขยายงานตัวแทน GitHub CLI
official
github-copilot-agent-tips-and-tricks
github
เคล็ดลับและเทคนิคสำหรับการทำงานกับ Pull Requests ของ GitHub Copilot Agent
official
rust-coding-skill
github
Use this skill whenever editing `*.rs` files in the `rust/` SDK in order to write idiomatic, efficient, well-structured Rust code
official
ai-ready
github
ทำให้ repo ใดๆ พร้อมสำหรับ AI — วิเคราะห์โค้ดเบสของคุณและสร้าง AGENTS.md, copilot-instructions.md, ขั้นตอนการทำงาน CI, เทมเพลต issue และอื่นๆ ขุดรีวิว PR ของคุณ…
official