react19-test-patterns

bởi github

Cung cấp các mẫu before/after để di chuyển tệp kiểm thử sang tương thích React 19, bao gồm import act(), loại bỏ Simulate và thay đổi số lượng gọi 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

Thêm skills từ github

console-rendering
github
Hướng dẫn sử dụng hệ thống kết xuất console dựa trên thẻ struct trong Go
official
acquire-codebase-knowledge
github
Sử dụng kỹ năng này khi người dùng yêu cầu rõ ràng để lập bản đồ, tài liệu hóa hoặc làm quen với một mã nguồn hiện có. Kích hoạt cho các lời nhắc như "lập bản đồ mã nguồn này", "tài liệu hóa…
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
Tạo tệp hướng dẫn AI agent tùy chỉnh thông qua lệnh hướng dẫn AgentRC. Tạo ra tệp .github/copilot-instructions.md (mặc định, được khuyến nghị cho Copilot trong VS…)
official
acreadiness-policy
github
Giúp người dùng chọn, viết hoặc áp dụng chính sách AgentRC. Chính sách tùy chỉnh điểm sẵn sàng bằng cách tắt các kiểm tra không liên quan, ghi đè mức độ tác động/cấp độ, thiết lập…
official
add-educational-comments
github
Thêm các bình luận giáo dục vào các tệp mã để biến chúng thành tài liệu học tập hiệu quả. Điều chỉnh độ sâu giải thích và giọng điệu theo ba cấp độ kiến thức có thể cấu hình: sơ cấp, trung cấp và nâng cao. Tự động yêu cầu một tệp nếu không có tệp nào được cung cấp, với danh sách đánh số để chọn nhanh. Mở rộng tệp lên tới 125% chỉ bằng các bình luận giáo dục (giới hạn cứng: 400 dòng mới; 300 dòng cho tệp trên 1.000 dòng). Bảo toàn mã hóa tệp, kiểu thụt lề, tính đúng đắn cú pháp và...
official
adobe-illustrator-scripting
github
Viết, gỡ lỗi và tối ưu hóa các tập lệnh tự động hóa Adobe Illustrator bằng ExtendScript (JavaScript/JSX). Sử dụng khi tạo hoặc sửa đổi các tập lệnh thao tác…
official
agent-governance
github
Các chính sách khai báo, phân loại ý định và nhật ký kiểm toán để kiểm soát quyền truy cập và hành vi công cụ của tác nhân AI. Các chính sách quản trị có thể kết hợp xác định công cụ được phép/bị chặn, bộ lọc nội dung, giới hạn tốc độ và yêu cầu phê duyệt — được lưu trữ dưới dạng cấu hình, không phải mã. Phân loại ý định ngữ nghĩa phát hiện các lời nhắc nguy hiểm (rò rỉ dữ liệu, leo thang đặc quyền, tiêm lời nhắc) trước khi thực thi công cụ bằng tín hiệu dựa trên mẫu. Trình trang trí quản trị cấp công cụ thực thi các ch
official