frontend-testing

Vitest testing patterns for a React app are set up by co-locating tests with source code using a .test.ts(x) suffix. This approach organizes unit, integration, and hook tests while avoiding separate __tests__ folders for maintainable structure.

The best way to mock TanStack Query and toast libraries in Vitest involves applying universal mocking patterns for services and hooks. This Skill provides specific guidelines for mocking these libraries to ensure consistent UI and integration test execution.

You measure test coverage and configure CI for front-end testing workflows by running npm run test:coverage. This command generates coverage reports to review, satisfying the configuration needs for continuous integration environments.

Yes, you can use co-located testing patterns for both unit and integration tests. The Skill provides structured guidance covering UI, integration, and hook testing with reusable examples that accelerate writing tests for React components.

You should avoid __tests__ folders when organizing Vitest tests to maintain a co-located structure. Placing files with a .test.ts(x) suffix directly next to source code improves maintainability and speeds up test writing for React applications.

Yes, this Skill provides templates and examples for testing React hooks. It includes structured Vitest-based patterns specifically designed for hook testing, alongside service mocking and UI testing guidelines for the SmartPocket React app.