testing

Plan tests by analyzing your React components and UI workflows, then write tests following AAA patterns (Arrange, Act, Assert) using Vitest as your test runner. Start with the /plan-test command to generate a test plan, then use /write-tests to implement tests with structured guidance for components and features.

Mock APIs using MSW (Mock Service Worker) to intercept network requests during testing. MSW lets you define handlers for endpoints your frontend consumes, providing consistent mocked responses without modifying application code or test setup.

Use Playwright to write end-to-end tests that verify complete user workflows across your application. Playwright automates browser interactions, capturing real user behavior patterns for features, page navigation, and form submissions.

Yes. Vitest handles unit and component tests for isolated logic and React rendering, while Playwright runs end-to-end tests for full workflows. This Skill guides you through both, applying each tool where it fits your testing strategy.

Use the /verify-test command to analyze test coverage, check for gaps in your test suite, and validate that tests follow quality standards like AAA patterns and proper data factories. Coverage reports identify untested code paths.

Follow AAA patterns (Arrange, Act, Assert), use data factories to manage test fixtures, and apply MSW for consistent API mocking. This Skill documents these patterns with templates so new contributors can write tests matching your project's conventions quickly.