thebushidocollective/han
Overview
This skill teaches professional Vitest testing patterns for TypeScript projects, covering unit tests, mocks, spies, and browser-mode testing. It focuses on practical patterns that improve test reliability, maintainability, and CI readiness. Examples and configuration guidance help teams adopt consistent, production-ready testing workflows.
How this skill works
The skill inspects common testing scenarios and provides concrete patterns: writing isolated unit tests, creating deterministic mocks and spies, running tests in node and browser modes, and integrating Vitest into CI pipelines. It explains configuration choices, lifecycle hooks, environment setup, and strategies for performance and error handling so you can apply patterns directly in your codebase.
When to use it
- Onboard Vitest into a new TypeScript project
- Replace brittle tests with clear mocks and spies
- Configure Vitest for browser-mode or DOM-based tests
- Integrate tests into CI/CD and quality gates
- Optimize long-running test suites for speed and parallelism
Best practices
- Keep unit tests fast and deterministic by using explicit mocks and restoring state between tests
- Favor small, single-purpose tests that assert behavior rather than implementation
- Use before/after hooks for setup and teardown to avoid test pollution
- Configure environment-specific settings (node vs browser) to reduce flakiness
- Run Vitest in CI with caching and parallelization but profile before changing concurrency
Example use cases
- Unit testing a library function with isolated mocks and snapshot checks
- Spying on API client calls to assert request shapes without network calls
- Running component tests in browser mode for DOM interactions using jsdom or real browsers
- Adding Vitest to a pipeline with fail-on-coverage and test reporting
- Migrating Jest tests to Vitest while preserving established patterns
FAQ
Use mocks for unit tests to keep them fast and deterministic; reserve integration tests for end-to-end verification of real integrations.
How do I avoid flaky browser-mode tests?
Ensure consistent environment setup, use explicit waits for async operations, isolate tests, and run in CI with stable browser versions or headless mode.
6 skills
This skill masters vitest testing patterns including unit tests, mocks, spies, and browser mode testing to ensure robust TypeScript code.
This skill converts Figma frames into production-ready React, Vue, or HTML/CSS components using MCP mappings and design tokens.
This skill helps you build Android UIs with Jetpack Compose by managing state and declarative patterns for responsive, reusable components.
This skill helps you master RSpec fundamentals including describe, context, it blocks, let, and basic matchers for reliable Ruby testing.
This skill helps you implement Phoenix Framework patterns with context design, controllers, and plugs to build scalable Elixir apps.
This skill describes Atomic Design fundamentals, quarks, atoms, molecules, organisms, templates, pages and how to structure scalable design systems.
