react19-test-patterns

von github

Bietet Vorher/Nachher-Muster für die Migration von Testdateien zur React 19-Kompatibilität, einschließlich act()-Imports, Simulate-Entfernung und StrictMode-Call-Count-Änderungen.

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

Mehr Skills von github

console-rendering
github
Anleitung zur Verwendung des auf struct-Tags basierenden Konsolen-Rendering-Systems in Go
official
acquire-codebase-knowledge
github
Verwenden Sie diese Fähigkeit, wenn der Benutzer explizit darum bittet, eine bestehende Codebasis zu kartieren, zu dokumentieren oder sich in sie einzuarbeiten. Auslöser für Aufforderungen wie „diese Codebasis kartieren“, „dokumentieren…
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
Generieren Sie maßgeschneiderte KI-Agenten-Anweisungsdateien über den AgentRC-Befehl. Erstellt .github/copilot-instructions.md (Standard, empfohlen für Copilot in VS…
official
acreadiness-policy
github
Helfen Sie dem Benutzer, eine AgentRC-Richtlinie auszuwählen, zu schreiben oder anzuwenden. Richtlinien passen die Bereitschaftsbewertung an, indem sie irrelevante Prüfungen deaktivieren, Auswirkungen/Stufen überschreiben, festlegen…
official
add-educational-comments
github
Füge pädagogische Kommentare zu Codedateien hinzu, um sie in effektive Lernressourcen zu verwandeln. Passt Erklärungstiefe und Ton an drei konfigurierbare Wissensstufen an: Anfänger, Fortgeschrittene und Fortgeschrittene. Fordert automatisch eine Datei an, falls keine bereitgestellt wird, mit nummerierter Liste für schnelle Auswahl. Erweitert Dateien um bis zu 125 % nur durch pädagogische Kommentare (hartes Limit: 400 neue Zeilen; 300 bei Dateien über 1.000 Zeilen). Bewahrt Dateikodierung, Einrückungsstil, Syntaxkorrektheit und...
official
adobe-illustrator-scripting
github
Schreiben, debuggen und optimieren Sie Adobe Illustrator-Automatisierungsskripte mit ExtendScript (JavaScript/JSX). Verwenden Sie dies beim Erstellen oder Ändern von Skripten, die…
official
agent-governance
github
Deklarative Richtlinien, Intent-Klassifizierung und Prüfpfade zur Kontrolle des Zugriffs und Verhaltens von KI-Agenten-Tools. Zusammensetzbare Governance-Richtlinien definieren erlaubte/blockierte Tools, Inhaltsfilter, Ratenbegrenzungen und Genehmigungsanforderungen – gespeichert als Konfiguration, nicht als Code. Semantische Intent-Klassifizierung erkennt gefährliche Eingabeaufforderungen (Datenerfassung, Privilegieneskalation, Prompt-Injection) vor der Tool-Ausführung mittels musterbasierter Signale. Der Governance-Decorator auf Tool-Ebene setzt Richtlinien bei Funktionen durch...
official