react19-test-patterns

par github

Fournit des motifs avant/après pour migrer les fichiers de test vers la compatibilité React 19, incluant les imports act(), la suppression de Simulate et les changements de comptage d'appels 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

Plus de skills de github

console-rendering
github
Instructions pour utiliser le système de rendu console basé sur les tags de struct en Go
official
acquire-codebase-knowledge
github
Utilisez cette compétence lorsque l'utilisateur demande explicitement de cartographier, documenter ou s'intégrer dans une base de code existante. Déclenchez-la pour des requêtes comme "cartographier cette base de code", "documenter…
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
Génère des fichiers d'instructions d'agent IA personnalisés via la commande d'instructions AgentRC. Produit .github/copilot-instructions.md (par défaut, recommandé pour Copilot dans VS…
official
acreadiness-policy
github
Aider l'utilisateur à choisir, rédiger ou appliquer une politique AgentRC. Les politiques personnalisent le score de préparation en désactivant les vérifications non pertinentes, en remplaçant l'impact/niveau, en définissant…
official
add-educational-comments
github
Ajouter des commentaires pédagogiques aux fichiers de code pour les transformer en ressources d'apprentissage efficaces. Adapte la profondeur et le ton des explications à trois niveaux de connaissances configurables : débutant, intermédiaire et avancé. Demande automatiquement un fichier si aucun n'est fourni, avec une liste numérotée pour une sélection rapide. Étend les fichiers jusqu'à 125 % en utilisant uniquement des commentaires pédagogiques (limite stricte : 400 nouvelles lignes ; 300 pour les fichiers de plus de 1 000 lignes). Préserve l'encodage du fichier, le style d'indentation, la correction syntaxique et...
official
adobe-illustrator-scripting
github
Rédigez, déboguez et optimisez des scripts d'automatisation Adobe Illustrator en utilisant ExtendScript (JavaScript/JSX). Utilisez lors de la création ou de la modification de scripts qui manipulent…
official
agent-governance
github
Politiques déclaratives, classification d'intention et pistes d'audit pour contrôler l'accès et le comportement des outils d'agents IA. Des politiques de gouvernance composables définissent les outils autorisés/bloqués, les filtres de contenu, les limites de débit et les exigences d'approbation — stockées en tant que configuration, pas de code. La classification d'intention sémantique détecte les invites dangereuses (exfiltration de données, escalade de privilèges, injection d'invite) avant l'exécution des outils à l'aide de signaux basés sur des motifs. Le décorateur de gouvernance au niveau des outils applique les politiques au niveau de la fonction...
official