skills.rest
bpteam
bpteamCOMMUNITY
Explore all skills by this author →
GitHub

react-tester

Orchestrate Vitest, Testing Library, and Apollo MockedProvider for React SPA component tests.

Updated Mar 18, 2026
Search Tags:#vitest#react#testing-library#unit-tests#apollo#component-tests#mockedprovider
One-click install
npx skills add https://github.com/bpteam/coder --skill react-tester
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-tester
Source: https://github.com/bpteam/coder/tree/main/.opencode/skills/react-tester
Command: npx skills add https://github.com/bpteam/coder --skill react-tester

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables reliable, deterministic unit and component testing for React SPA applications using Vitest, React Testing Library, and Apollo MockedProvider, reducing flaky tests and speeding feedback loops.

Core Features & Use Cases

  • Shared renderApp() helper that wraps Router + providers.
  • Deterministic, user-visible assertions with waitFor/findBy*.
  • Apollo MockedProvider integration for exact query documents and variables, with happy and error path tests.
  • Avoids snapshot tests and brittle DOM structure.

Quick Start

Run the test suite for your React SPA by executing npm test in the project root.

Frequently Asked Questions about react-tester

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

FAQPage Schema
How do I write deterministic React component tests with Vitest and Testing Library?▼

Deterministic React component tests use Vitest and Testing Library to assert user-visible behavior via waitFor and findBy queries, avoiding brittle DOM structure assertions and reducing test flakiness.

How do I mock Apollo GraphQL queries in React unit tests?▼

Mock Apollo GraphQL queries in React unit tests using Apollo MockedProvider, supplying exact query documents and variables to deterministically verify both success responses and error paths.

What is the best way to set up a shared render wrapper for React SPA tests?▼

A shared render wrapper for React SPA tests centralizes Router and provider setup via a renderApp helper, ensuring consistent component testing environments and reducing repetitive boilerplate.

Why are my React snapshot tests flaky and should I avoid them?▼

React snapshot tests become flaky due to brittle DOM structure coupling; focusing on user-visible assertions with Testing Library yields deterministic results you can trust without maintaining snapshots.

Does Vitest work with Apollo MockedProvider for testing error paths?▼

Vitest works with Apollo MockedProvider to test error paths by defining explicit mocks with exact documents and variables, allowing you to verify UI behavior during GraphQL query failures.

Related Skills

Explore More Software Engineering Skills→
MolcajeteAIMolcajeteAI
2

component-testing

Create unit and integration tests for React components with Vitest and Testing Library in JSDOM environments.

Official
Intermediate
BerryKuipersBerryKuipers
7

validate-coverage-threshold

Validate JavaScript/TypeScript test coverage against configured thresholds from coverage reports.

Community
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

apollo-client-patterns

Manage GraphQL queries, mutations, and cache state in React with Apollo Client.

Official
Intermediate
aroidoaroido

React Testing with Vitest and RTL

Create unit and integration tests for React components with Vitest and React Testing Library.

Official
Intermediate