react19-test-patterns

por github

Proporciona patrones de antes/después para migrar archivos de prueba a la compatibilidad con React 19, incluyendo importaciones de act(), eliminación de Simulate y cambios en el conteo de llamadas de 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

Más skills de github

console-rendering
github
Instrucciones para usar el sistema de renderizado en consola basado en etiquetas de struct en Go
official
acquire-codebase-knowledge
github
Usa esta habilidad cuando el usuario solicite explícitamente mapear, documentar o incorporarse a un código base existente. Actívala para indicaciones como "mapea este código base", "documenta…
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
Genera archivos de instrucciones de agente de IA personalizados mediante el comando de instrucciones de AgentRC. Produce .github/copilot-instructions.md (por defecto, recomendado para Copilot en VS…)
official
acreadiness-policy
github
Ayudar al usuario a seleccionar, redactar o aplicar una política de AgentRC. Las políticas personalizan la puntuación de readiness desactivando comprobaciones irrelevantes, anulando impacto/nivel, estableciendo…
official
add-educational-comments
github
Añade comentarios educativos a archivos de código para convertirlos en recursos de aprendizaje efectivos. Adapta la profundidad y el tono de las explicaciones a tres niveles de conocimiento configurables: principiante, intermedio y avanzado. Solicita automáticamente un archivo si no se proporciona ninguno, con una lista numerada para una selección rápida. Expande los archivos hasta un 125% utilizando solo comentarios educativos (límite estricto: 400 líneas nuevas; 300 para archivos de más de 1,000 líneas). Conserva la codificación del archivo, el estilo de sangría, la corrección sintáctica y...
official
adobe-illustrator-scripting
github
Escribir, depurar y optimizar scripts de automatización de Adobe Illustrator usando ExtendScript (JavaScript/JSX). Úselo al crear o modificar scripts que manipulen…
official
agent-governance
github
Políticas declarativas, clasificación de intenciones y registros de auditoría para controlar el acceso y comportamiento de herramientas de agentes de IA. Las políticas de gobernanza componibles definen herramientas permitidas/bloqueadas, filtros de contenido, límites de velocidad y requisitos de aprobación, almacenados como configuración, no como código. La clasificación semántica de intenciones detecta indicaciones peligrosas (exfiltración de datos, escalada de privilegios, inyección de indicaciones) antes de la ejecución de herramientas mediante señales basadas en patrones. El decorador de gobernanza a nivel de herramienta aplica políticas en funciones...
official