mcpField
T
testing-react

testing-react

github.com/thebeardedbearsasTesting & quality107204 installsUpdated today
Repository

About testing-react

A React testing strategy skill for teams working with React 19. It recommends browser-oriented component testing, user-visible behavior checks, and complementary tools for end-to-end, mutation, and property-based tests.

Key features

  1. 01Vitest Browser Mode component tests
  2. 02vitest-browser-react rendering and locators
  3. 03Playwright component and end-to-end testing
  4. 04Stryker mutation testing
  5. 05fast-check property-based testing
  6. 06MSW API request mocking

Use cases

  1. 01Test component behavior in real browsers
  2. 02Run complete user-flow end-to-end tests
  3. 03Assess tests with mutation scores
  4. 04Generate property-based test cases

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/thebeardedbearsas/claude-craft --skill testing-react

After installing, type/testing-reactin Claude Code to confirm it loaded.

Bundled filesREFERENCE.md

Details

From the project README

Stratégie de Tests React 19 + Compiler 1.0

Versions : React 19.2+ | React Compiler 1.0 | Vitest 5 | Playwright

React Compiler 1.0 (auto-memoization) est transparent pour les tests — tester le comportement visible, jamais les optimisations internes.

Stack recommandée 2026

TypeOutilUsage
Unit/ComposantsVitest 5 Browser ModeChromium/Firefox/WebKit natif
Composants (navigateur)vitest-browser-reactrender + locators, intégré à Vitest Browser Mode
Component TestingPlaywright CTAlternative à RTL — browser réel
Composants (JSDOM)React Testing Library 16Toujours maintenu — pertinent pour les suites JSDOM existantes
E2EPlaywrightFlows utilisateur complets
MutationStrykerQualité des tests (score >= 80%)
Property-basedfast-checkGénération de cas de test

Privilégier un vrai navigateur (Vitest Browser Mode, Playwright CT) plutôt que JSDOM (lourd, incomplet). React Testing Library 16 reste maintenu : l'utiliser pour les suites JSDOM existantes, ne pas migrer sans bénéfice.

Sources : Vitest Browser Mode, vitest-browser-react, Playwright Component Testing, Stryker Mutator

Invariants non-négociables

  • Vitest Browser Mode (provider: playwright) pour les nouveaux tests composants — éviter JSDOM
  • Tester le comportement (ce que voit l'utilisateur), pas l'implémentation
  • Ne jamais tester les optimisations du React Compiler (memoization)
  • Mutation score >= 80% via Stryker avant merge
  • Vitest projects pour monorepos (unit / browser séparés) — workspace est déprécié
  • MSW pour mocker les appels API (pas de fetch mockée à la main)

Checklist par type

TypeVérification
ComposantVitest Browser Mode ou Playwright CT, interactions réelles
HookVitest, renderHook si nécessaire
RSCTest du rendu HTML retourné (pas de DOM)
E2EPlaywright, flows complets avec expect().toHaveURL()
Mutationnpx stryker run, seuil break >= 50, high >= 80

Détails complets, exemples de code, configs et checklists : voir REFERENCE.md

Comments

Markdown supported