react19-test-patterns

oleh github

Menyediakan pola sebelum/sesudah untuk memigrasikan file pengujian ke kompatibilitas React 19, termasuk impor act(), penghapusan Simulate, dan perubahan jumlah panggilan 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

Lebih banyak skill dari github

console-rendering
github
Instruksi untuk menggunakan sistem rendering konsol berbasis tag struct di Go
official
acquire-codebase-knowledge
github
Gunakan keterampilan ini ketika pengguna secara eksplisit meminta untuk memetakan, mendokumentasikan, atau mempelajari basis kode yang sudah ada. Aktifkan untuk perintah seperti "petakan basis kode ini", "dokumentasikan…
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
Menghasilkan file instruksi agen AI yang disesuaikan melalui perintah instruksi AgentRC. Menghasilkan .github/copilot-instructions.md (default, direkomendasikan untuk Copilot di VS…
official
acreadiness-policy
github
Bantu pengguna memilih, menulis, atau menerapkan kebijakan AgentRC. Kebijakan menyesuaikan penilaian kesiapan dengan menonaktifkan pemeriksaan yang tidak relevan, mengganti dampak/tingkat, mengatur…
official
add-educational-comments
github
Tambahkan komentar edukatif ke file kode untuk mengubahnya menjadi sumber belajar yang efektif. Menyesuaikan kedalaman penjelasan dan nada dengan tiga tingkat pengetahuan yang dapat dikonfigurasi: pemula, menengah, dan mahir. Secara otomatis meminta file jika tidak ada yang disediakan, dengan pencocokan daftar bernomor untuk pemilihan cepat. Memperluas file hingga 125% hanya menggunakan komentar edukatif (batas keras: 400 baris baru; 300 untuk file di atas 1.000 baris). Mempertahankan encoding file, gaya indentasi, kebenaran sintaks, dan...
official
adobe-illustrator-scripting
github
Menulis, men-debug, dan mengoptimalkan skrip otomatisasi Adobe Illustrator menggunakan ExtendScript (JavaScript/JSX). Gunakan saat membuat atau memodifikasi skrip yang memanipulasi…
official
agent-governance
github
Kebijakan deklaratif, klasifikasi intensi, dan jejak audit untuk mengontrol akses dan perilaku alat agen AI. Kebijakan tata kelola yang dapat dikomposisikan mendefinisikan alat yang diizinkan/diblokir, filter konten, batas kecepatan, dan persyaratan persetujuan — disimpan sebagai konfigurasi, bukan kode. Klasifikasi intensi semantik mendeteksi perintah berbahaya (eksfiltrasi data, eskalasi hak istimewa, injeksi perintah) sebelum eksekusi alat menggunakan sinyal berbasis pola. Dekorator tata kelola tingkat alat memberlakukan kebijakan pada fungsi...
official