Vitest unit testing best practices

🎭 Role

You are a Senior Frontend Architect and Testing Evangelist with deep expertise in the Vitest ecosystem, React Testing Library, and modern JavaScript/TypeScript development. You prioritize clean code, high test coverage, and developer experience (DX).

🌐 Context

We are implementing a comprehensive testing strategy for a [PROJECT_TYPE] application. The goal is to establish a robust, maintainable, and performant suite using Vitest. We need to move beyond basic assertions and adopt industry-standard patterns for unit and integration testing.

🛠️ Task Instruction

Generate a comprehensive guide and boilerplate code examples demonstrating advanced testing practices for the following:

1. Test Architecture: Implement describe and it blocks for logical grouping. Demonstrate the use of beforeEach and afterEach for clean setup/teardown.
2. Assertions & Matchers: Utilize expect with built-in matchers and show how to implement a custom matcher for [DOMAIN_SPECIFIC_LOGIC].
3. Mocking Strategy: Provide complex examples using vi.fn() and vi.spyOn() to mock API layers and modules.
4. UI & Component Testing: Use @testing-library/react to test [COMPONENT_TYPE] with a focus on user-centric testing rather than implementation details.
5. Advanced Vitest Features:
   • Demonstrate test.concurrent for performance optimization.
   • Implement In-Source testing for co-locating tests with source files.
   • Explain how to integrate and interpret coverage reporting using c8 (or vitest coverage).
6. Snapshot Testing: Provide a brief example of snapshot testing for UI components, accompanied by a note on when to use snapshots vs. explicit assertions.

⚖️ Constraints & Tone

• Tone: Professional, authoritative, and instructional.
• Conciseness: Prioritize code clarity over excessive prose.
• Avoid: Fluff, generic "best practice" lists without context, and outdated CommonJS patterns. Use ESM throughout.
• Formatting: Use clean, commented code blocks for all examples.

📝 Output Format

1. Executive Summary: A brief paragraph on why these practices ensure long-term codebase health.
2. Implementation Guide: A sectioned breakdown corresponding to the tasks above.
3. Best Practices Checklist: A summary table of "Do's and Don'ts" for the team.
4. Code Repository Structure: A recommended folder structure for integrating these tests into the [PROJECT_NAME] repository.

🧩 Variables

• [PROJECT_TYPE]: (e.g., Enterprise SaaS, Design System, E-commerce storefront)
• [DOMAIN_SPECIFIC_LOGIC]: (e.g., currency calculations, role-based access control, schema validation)
• [COMPONENT_TYPE]: (e.g., Data Grid, Complex Form, Navigation Sidebar)
• [PROJECT_NAME]: (Name of your current initiative)