skills.rest
AdelysAlberto
AdelysAlbertoCOMMUNITY
Explore all skills by this author →
Website𝕏@adelysalbertoGitHub

testing

Defines Vitest, React Testing Library, and MSW testing standards for React projects.

1|Updated Jul 18, 2025
Search Tags:#vitest#unit testing#mocking#tanstack query#react testing library#accessibility testing#msw
One-click install
npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill testing-adelysalberto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: testing
Source: https://github.com/AdelysAlberto/md-configs-and-agents/tree/main/agents-hermes/skills/testing
Command: npx skills add https://github.com/AdelysAlberto/md-configs-and-agents --skill testing-adelysalberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams often write inconsistent tests that rely on implementation details, scattered mock setups, or the wrong tooling, leading to brittle test suites. This Skill enforces a unified testing strategy so every component, hook, and utility is tested the same way. ## Core Features & Use Cases - Standardized Test Stack: Mandates Vitest as the runner, React Testing Library for components, and MSW for network mocking, with tests colocated in __test__ folders. - Behavior-Driven Testing: Provides templates and rules for testing user-visible behavior (roles, text, interactions) instead of internal state or implementation details. - Mocking Conventions: Centralizes global mocks and MSW handlers in src/mocks, and shows how to wrap components in a test QueryClientProvider for TanStack Query. - Use Case: When adding a new React component, use this Skill to generate a colocated test file that renders the component, simulates clicks, mocks API calls with MSW, and verifies accessibility. ## Quick Start Write a Vitest test for my React component following the team's testing standards, including MSW mocks and a TanStack Query provider wrapper.

Frequently Asked Questions about testing

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

FAQPage Schema
How do I test React components with Vitest and React Testing Library?▼

Render the component with React Testing Library's render function, then assert on visible behavior using queries like getByRole and getByText. Simulate user actions with fireEvent and verify callbacks with Vitest's vi.fn() spies.

Should I use MSW or vi.mock for mocking API calls in tests?▼

Prefer MSW (Mock Service Worker) to intercept network requests at the HTTP level instead of mocking hooks or HTTP libraries with vi.mock. All global MSW handlers should live in the src/mocks folder for consistency.

Where should test files be placed in a React project?▼

Place tests next to the module they test, inside a __test__ or test folder. For example, src/components/MyComponent/__test__/MyComponent.test.tsx keeps tests grouped and the structure clean.

How do I test components that use TanStack Query?▼

Wrap the component in a QueryClientProvider with a fresh QueryClient configured with retry disabled. Create a helper like renderWithQuery that builds the client and renders the UI inside the provider.

What should I avoid testing in React components?▼

Avoid testing implementation details such as internal state, library internals, or private methods. Test observable behavior instead: rendering with required props, user interactions, conditional states like loading and error, and accessibility.

Related Skills

Explore More Software Engineering Skills→
posit-devposit-dev
4.2k

author-vitest-tests

Writes and reviews Vitest tests for Positron src/vs/ source code and React components.

Official
Advanced
ValyntValynt

run-tests

Automate test execution, coverage reporting, and CI validation with Vitest and Playwright.

Official
Advanced
VYRE-StudiosVYRE-Studios

webapp-testing

Automate end-to-end web testing across browsers and APIs with Playwright or Cypress.

Official
Intermediate
heaptracetechnologyheaptracetechnology
13

e2e-test

Automate end-to-end browser tests for multi-step user journeys with Playwright or Cypress.

Community
Advanced