component-testing

Test React components with MSW, React Query, and Vitest.

18|8|Updated May 31, 2023

Search Tags:#code quality #vitest #testing #react #component testing #msw

Ready to run

npx skills add https://github.com/jpmorgan-payments/embedded-finance --skill component-testing-jpmorgan-payments

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-testing
Source: https://github.com/jpmorgan-payments/embedded-finance/tree/main/.github/skills/component-testing
Command: npx skills add https://github.com/jpmorgan-payments/embedded-finance --skill component-testing-jpmorgan-payments

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized and comprehensive approach to testing React components, ensuring code quality, reliability, and maintainability through automated testing patterns.

Core Features & Use Cases

Standardized Testing Patterns: Offers clear guidelines for writing tests, setting up mocks, and handling API interactions.
Mock Service Worker (MSW) Integration: Facilitates realistic API mocking for isolated component testing.
React Query & Vitest Support: Aligns with modern React testing ecosystems.
Coverage Enforcement: Mandates a minimum of 80% test coverage.
Use Case: When developing a new React component, use this Skill's patterns to write unit and integration tests that cover rendering, user interactions, and API calls, ensuring it functions as expected before merging.

Quick Start

Use the component-testing skill to write tests for your React components following the patterns in AGENTS.md.

Frequently Asked Questions about component-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I test React components with Vitest and MSW?▼

To test React components with Vitest and MSW, you use standardized patterns for mocking API interactions and rendering components. This approach isolates component behavior for reliable unit and integration testing.

What is the minimum test coverage required for React components?▼

The minimum test coverage required for React components is 80% line coverage. Enforcing this threshold ensures code quality, reliability, and maintainability in component development before merging.

How do I set up API mocking for React Query in component tests?▼

You set up API mocking for React Query by integrating Mock Service Worker (MSW) into your tests. This facilitates realistic API mocking for isolated component testing within the Vitest ecosystem.

Can I use React Query with Vitest for component testing?▼

Yes, you can use React Query with Vitest for component testing. This Skill aligns with modern React testing ecosystems, providing patterns to handle API interactions and rendering seamlessly.

Where should test files be located in a React project?▼

Test files should be colocated with their implementation files, adhering to specific file naming conventions. Colocating tests ensures maintainability and keeps component logic directly associated with its test coverage.

What are the limitations of using MSW for React component testing?▼

While MSW provides realistic API mocking, it requires adherence to specific file naming conventions and a minimum 80% line coverage. These constraints ensure maintainability but demand strict test setup discipline.