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

セキュリティとテスト

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.

主な機能

End-to-end testing structures using Playwright and Page Object Model (POM)
Standardized Vitest and React Testing Library setup configurations
Network-level API mocking with MSW (Mock Service Worker)
Best practices for testing React hooks and utility functions
Accessible component testing patterns using getByRole and user-event
0 GitHub stars

ユースケース

Implementing robust E2E test suites for complex user flows and authentication
Refactoring existing tests to follow better accessibility and maintainability patterns
Setting up a new testing environment for a Next.js or React project

概要

主な機能

End-to-end testing structures using Playwright and Page Object Model (POM)
Standardized Vitest and React Testing Library setup configurations
Network-level API mocking with MSW (Mock Service Worker)
Best practices for testing React hooks and utility functions
Accessible component testing patterns using getByRole and user-event
0 GitHub stars

ユースケース

Implementing robust E2E test suites for complex user flows and authentication
Refactoring existing tests to follow better accessibility and maintainability patterns
Setting up a new testing environment for a Next.js or React project