К основному содержанию
скилл GitHub Copilot официальный · GitHub

react19-test-patterns — скилл для GitHub Copilot: тесты React 19

Подсказывает, как обновить тесты для совместимости с React 19. Пригодится при миграции с React 18, особенно если тесты используют react-dom/test-utils или проверяют число вызовов эффектов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add github/awesome-copilot --skill react19-test-patterns -a claude-code
Открыть на GitHub

Что делает react19-test-patterns

Скилл описывает порядок миграции: перенести act из react-dom/test-utils в react, заменить Simulate на fireEvent и перейти с устаревших тестовых утилит на методы React Testing Library. Для поиска DOM-элементов он предлагает, например, getByRole и getByTestId.

Отдельно разобраны проверки в StrictMode: в React 19 эффекты в режиме разработки вызываются один раз, а вызовы тела компонента по-прежнему могут происходить дважды. Скилл советует сверять фактическое число вызовов по выводу теста, а не подбирать его наугад. Для оставшихся предупреждений о act предусмотрена обёртка асинхронных операций.

Ставьте его, если обновляете тесты проекта до React 19. Примеры используют @testing-library/react; установку можно выполнить через npx skills add github/awesome-copilot --skill react19-test-patterns или добавить файл в .github/skills/react19-test-patterns/SKILL.md.

Какие задачи решает

  • перенести act из react-dom/test-utils в react
  • заменить вызовы Simulate на fireEvent
  • подобрать замену устаревшим API react-dom/test-utils
  • обновить ожидания числа вызовов эффектов в StrictMode
  • найти тесты с предупреждениями о вызовах вне act

Примеры запросов агенту

  • Обнови тесты в `LoginForm.test.jsx` для React 19 по react19-test-patterns.
  • Замени `Simulate` в `Button.test.jsx` на `fireEvent` и обнови импорты.
  • Проверь ожидания `StrictMode` в `Profile.test.jsx` по фактическому числу вызовов.

Как установить react19-test-patterns

1Через Skills CLI (Vercel)

npx skills add github/awesome-copilot --skill react19-test-patterns -a claude-code

2Вручную: положить файлы

~/.claude/skills/react19-test-patterns/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/react19-test-patterns/

Из того же набора554

Весь набор →
git-commit официальный github Скилл разбирает изменения Git, выбирает связанные файлы и создаёт коммит в формате Conventional Commits. Пригодится, когда нужно закоммитить одну или несколько логических частей изменений. GitHub Copilot 47 165установок excalidraw-diagram-generator официальный github Скилл превращает описание на обычном языке в диаграмму Excalidraw. Подойдёт, когда нужно показать процесс, связи между объектами или устройство системы. GitHub Copilot 31 639установок multi-stage-dockerfile официальный github Скилл помогает создавать многоэтапные Dockerfile для разных языков и фреймворков. Пригодится, когда важны размер и состав runtime-образа. GitHub Copilot 29 688установок documentation-writer официальный github Скилл для создания технической документации по фреймворку Diátaxis: туториалы, гайды, справки и объяснения. Предлагает структуру перед написанием. GitHub Copilot 27 757установок prd официальный github Собирает из идеи структурированный PRD с пользовательскими историями, техническими требованиями и рисками. Подходит для планирования новых функций, в том числе с AI. GitHub Copilot 24 035установок refactor официальный github Скилл помогает менять структуру кода без изменения внешнего поведения. Подойдёт для постепенной уборки сложных функций, дублирования и кодовых запахов. GitHub Copilot 22 321установок java-springboot официальный github Задаёт практики разработки Spring Boot-приложений: от структуры проекта до тестов и безопасности. Пригодится, когда Copilot пишет или проверяет Java-код. GitHub Copilot 21 272установок create-readme официальный github Скилл изучает проект и создаёт структурированный README.md. Подойдёт, когда документацию нужно собрать по коду и файлам проекта. GitHub Copilot 19 081установок

Похожие

ai-debt-detector Adit Jain Скилл проверяет код после генерации ИИ и ищет скрытые ошибки: пропущенную обработку сбоев, утечки ресурсов, лишние зависимости и архитектурный дрейф. Claude Code CX Codex Cursor 2 900установок improve-codebase-architecture Matt Pocock Скилл ищет архитектурные узкие места в кодовой базе и показывает варианты углубления модулей в HTML-отчёте. Подойдёт для ревью перед рефакторингом. Claude Code 1 163 035установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок tdd Matt Pocock Скилл управляет циклом красный-зелёный в TDD: проверяет, что тесты пишутся до кода, держит их на уровне публичных интерфейсов и не завязывает на внутреннюю структуру. Claude Code 1 141 062установок skill-creator официальный anthropics Помогает создать новый скилл, доработать существующий и проверить результат через тестовые промпты и оценки. Claude Code Claude.ai 414 180установок agent-browser vercel-labs Скилл управляет браузером через CLI: открывает страницы, заполняет формы, нажимает кнопки и проверяет веб-приложения. Подходит для задач, где агенту нужно действовать в интерфейсе. Claude Code CX Codex Cursor +1 1 200 000установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок

Вопросы о react19-test-patterns

Как установить react19-test-patterns в GitHub Copilot?

Выполните npx skills add github/awesome-copilot --skill react19-test-patterns или установите с помощью gh skill install github/awesome-copilot react19-test-patterns.

Что делает react19-test-patterns?

Скилл показывает, как обновить тесты для React 19: заменить удалённые API, перенести act и скорректировать проверки вызовов в StrictMode.

Нужен ли для примеров React Testing Library?

Да. Для замен Simulate и renderIntoDocument в примерах используются fireEvent и render из @testing-library/react.

Исходный текст

SKILL.md · MIT
---
name: react19-test-patterns
description: 'Provides before/after patterns for migrating test files to React 19 compatibility, including act() imports, Simulate removal, and StrictMode call count changes.'
---

# 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. **`Simulate` → `fireEvent`**  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

```jsx
// Before  REMOVED in React 19:
import { act } from 'react-dom/test-utils';

// After:
import { act } from 'react';
```

If mixed with other test-utils imports:
```jsx
// 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

```jsx
// 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 |
|---|---|
| `act` | `import { act } from 'react'` |
| `Simulate` | `fireEvent` from `@testing-library/react` |
| `renderIntoDocument` | `render` from `@testing-library/react` |
| `findRenderedDOMComponentWithTag` | `getByRole`, `getByTestId` from RTL |
| `findRenderedDOMComponentWithClass` | `getByRole` or `container.querySelector` |
| `scryRenderedDOMComponentsWithTag` | `getAllByRole` from RTL |
| `isElement`, `isCompositeComponent` | Remove  not needed with RTL |
| `isDOMComponent` | Remove |

---

## 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:**
```bash
# Run the failing test, read the actual count from the error:
npm test -- --watchAll=false --testPathPattern="[filename]" --forceExit 2>&1 | grep -E "Expected|Received"
```

```jsx
// 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);
```

```jsx
// Render-phase calls (component body)  still double-invoked in React 19 StrictMode:
expect(renderSpy).toHaveBeenCalledTimes(2);  // stays at 2 for render body calls
```

© github · MIT · github/awesome-copilot

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой