Why should I use MSW for API mocking according to these patterns?

MSW mocks at the network level rather than mocking global fetch, providing a more realistic testing environment that catches more bugs and handles HTTP scenarios better.

Does it cover Next.js Server Components?

Yes, it includes guidance on testing server components at the integration level and through client-side wrappers for visual testing.

What testing frameworks does this skill support?

It provides comprehensive patterns and setup guides for Vitest, React Testing Library, Playwright, and Mock Service Worker (MSW).

What is the recommended query priority for testing components?

The skill prioritizes accessible queries like getByRole and getByLabelText to ensure your application is accessible to screen readers and resilient to implementation changes.

React Testing Patterns

Name: React Testing Patterns
Author: Naw3

byNaw3

0•

セキュリティとテスト

Implements comprehensive testing strategies using Vitest, React Testing Library, and Playwright for modern React applications.

This skill provides standardized patterns and best practices for testing React and Next.js applications across the entire testing pyramid. It includes detailed configurations and implementation guides for Vitest and React Testing Library for unit and component tests, MSW for API mocking, and Playwright for robust end-to-end testing. By following these patterns, developers can ensure high code quality, accessible user interfaces, and reliable application behavior while maintaining a maintainable and scalable test suite through proven methods like the Page Object Model.

主な機能

01End-to-end testing structures using Playwright and Page Object Model (POM)

02Standardized Vitest and React Testing Library setup configurations

03Network-level API mocking with MSW (Mock Service Worker)

04Best practices for testing React hooks and utility functions

05Accessible component testing patterns using getByRole and user-event

060 GitHub stars

ユースケース

01Implementing robust E2E test suites for complex user flows and authentication

02Refactoring existing tests to follow better accessibility and maintainability patterns

03Setting up a new testing environment for a Next.js or React project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add naw3/skillsrepo testing-patterns

For use in Claude.ai and ChatGPT

Download Skill