react19-test-patterns

โดย github

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

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
acquire-codebase-knowledge
github
ใช้ทักษะนี้เมื่อผู้ใช้ขอให้ทำแผนที่ จัดทำเอกสาร หรือเริ่มต้นใช้งานในโค้ดเบสที่มีอยู่จริง โดยจะเริ่มทำงานเมื่อมีข้อความแจ้งเช่น "ทำแผนที่โค้ดเบสนี้" "จัดทำเอกสาร…
official
acreadiness-assess
github
Run the AgentRC readiness assessment on the current repository and produce a static HTML dashboard at reports/index.html. Wraps `npx github:microsoft/agentrc…
official
acreadiness-generate-instructions
github
สร้างไฟล์คำแนะนำ AI agent ที่ปรับแต่งตามคำสั่ง AgentRC instructions สร้างไฟล์ .github/copilot-instructions.md (ค่าเริ่มต้น แนะนำสำหรับ Copilot ใน VS…)
official
acreadiness-policy
github
ช่วยผู้ใช้เลือก เขียน หรือใช้ AgentRC policy นโยบายปรับแต่งการให้คะแนนความพร้อมโดยปิดการตรวจสอบที่ไม่เกี่ยวข้อง เปลี่ยนระดับผลกระทบ/ระดับ การตั้งค่า…
official
add-educational-comments
github
เพิ่มความคิดเห็นเชิงการศึกษาให้กับไฟล์โค้ดเพื่อเปลี่ยนให้เป็นแหล่งเรียนรู้ที่มีประสิทธิภาพ ปรับระดับความลึกและน้ำเสียงของคำอธิบายตามระดับความรู้ที่กำหนดได้สามระดับ: ผู้เริ่มต้น ระดับกลาง และระดับสูง ขอไฟล์โดยอัตโนมัติหากไม่มีไฟล์ที่ให้ไว้ พร้อมการจับคู่รายการแบบมีหมายเลขเพื่อการเลือกที่รวดเร็ว ขยายไฟล์ได้สูงสุด 125% โดยใช้เฉพาะความคิดเห็นเชิงการศึกษา (ขีดจำกัดสูงสุด: 400 บรรทัดใหม่; 300 บรรทัดสำหรับไฟล์ที่มีมากกว่า 1,000 บรรทัด) รักษาการเข้ารหัสไฟล์ รูปแบบการเยื้อง ความถูกต้องของไวยากรณ์ และ...
official
adobe-illustrator-scripting
github
เขียน ดีบัก และปรับสคริปต์อัตโนมัติของ Adobe Illustrator ให้เหมาะสมโดยใช้ ExtendScript (JavaScript/JSX) ใช้เมื่อสร้างหรือแก้ไขสคริปต์ที่จัดการ...
official
agent-governance
github
นโยบายเชิงประกาศ การจำแนกเจตนา และเส้นทางการตรวจสอบสำหรับควบคุมการเข้าถึงเครื่องมือและพฤติกรรมของเอเจนต์ AI นโยบายการกำกับดูแลที่ประกอบได้กำหนดเครื่องมือที่อนุญาต/บล็อก ตัวกรองเนื้อหา การจำกัดอัตรา และข้อกำหนดการอนุมัติ — จัดเก็บเป็นคอนฟิกูเรชัน ไม่ใช่โค้ด การจำแนกเจตนาเชิงความหมายตรวจจับพรอมต์อันตราย (การขโมยข้อมูล การยกระดับสิทธิ์ การฉีดพรอมต์) ก่อนการดำเนินการเครื่องมือโดยใช้สัญญาณตามรูปแบบ ตัวตกแต่งการกำกับดูแลระดับเครื่องมือบังคับใช้นโยบายที่ฟังก์ชัน...
official