skills.rest
recca0120
recca0120COMMUNITY
Explore all skills by this author →
WebsiteGitHub

testing-best-practices

Standardize Vitest and Testing Library practices for stable async tests.

11|2|Updated Feb 5, 2026
Search Tags:#vitest#react#async testing#mocking#testing-library#msw#test hygiene
One-click install
npx skills add https://github.com/recca0120/code-quest --skill testing-best-practices-recca0120
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: testing-best-practices
Source: https://github.com/recca0120/code-quest/tree/main/.claude/skills/testing-best-practices
Command: npx skills add https://github.com/recca0120/code-quest --skill testing-best-practices-recca0120

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves inconsistent, flaky, and hard-to-maintain tests by standardizing how to mock APIs, write async assertions, and select DOM queries in Vitest + Testing Library.

Core Features & Use Cases

  • Async assertion patterns: Use the right Testing Library queries (findBy/queryBy/getBy) and wait utilities to avoid race conditions.
  • Mocking strategy guidance: Choose MSW for HTTP-level mocking and vi.mock for module-level dependencies, plus clear decision rules.
  • Behavior-first assertions: Assert semantic tokens and contract-like expectations rather than brittle className utility strings.
  • Vitest API cheatsheet: Apply consistent mocking/spying lifecycle practices (clearAllMocks, restoreAllMocks) for deterministic results.
  • Use cases: React component tests, integration tests that require API fakes, and server-side tests involving DB or socket.io patterns via referenced companion skills.

Quick Start

Tell the AI: "Help me write a stable Vitest + Testing Library test for this component, using MSW for the API and findByRole/queryBy patterns for async UI states."

Frequently Asked Questions about testing-best-practices

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

FAQPage Schema
How do I fix flaky Vitest and Testing Library tests caused by async race conditions?▼

Fix flaky Vitest tests by using correct async Testing Library queries like findBy for awaiting elements and queryBy for conditional checks, eliminating race conditions.

When should I use MSW versus vi.mock for mocking dependencies in Vitest?▼

Use MSW for HTTP-level API mocking and vi.mock for module-level dependencies in Vitest, applying clear decision rules to select the right test double for predictable results.

What is the best way to write a stable Vitest test for a React component with async UI states?▼

Write stable Vitest React tests by asserting semantic tokens with findByRole and queryBy patterns, ensuring behavior-first assertions rather than relying on brittle className strings.

Does Vitest support socket.io or database testing workflows for server-side tests?▼

Vitest supports server-side testing by providing predictable test doubles for socket or pipeline harnesses, referenced through companion skills for DB and socket.io patterns.

Why are my Vitest mocks returning stale data across multiple test cases?▼

Vitest mocks return stale data when lifecycle practices are inconsistent; apply clearAllMocks and restoreAllMocks in your test setup to ensure deterministic, isolated results.

Related Skills

Explore More Software Engineering Skills→
diego-tobalinadiego-tobalina
1

react-testing

Automate React component testing with Vitest and React Testing Library.

Community
Intermediate
u9401066u9401066

project-tester

Run Python pytest and Node.js npm test suites and generate structured reports.

Community
Intermediate
recca0120recca0120
11

vitest-testing

Guide Vitest test writing and debugging for server-side async pipelines.

Community
Advanced
JoeGaebelJoeGaebel
25

jest-frontend-testing

Generates React component and hook tests with React Testing Library and MSW API mocking.

Community
Intermediate