react-tanstack-testing skill

Overview

This skill provides specialized testing patterns and ready-made templates for React applications using the TanStack ecosystem (Query, Router, Table, Form) with Vite and Vitest. It centralizes examples, mocking strategies, and checklists so teams can write reliable, fast tests for server state, routing, and UI behaviors. The goal is to reduce boilerplate and improve confidence when changing data-fetching or navigation logic.

How this skill works

The skill supplies test suites, reusable helpers, and mocking patterns that integrate TanStack Query, TanStack Router, Table, and Form with Vitest and Vite. It includes examples for mocking server state, controlling query lifecycles, simulating router navigation, and asserting table and form behaviors. Helpers wrap common setup/teardown, test providers, and network stubbing so tests stay focused on behavior rather than plumbing.

When to use it

• Testing React components that rely on TanStack Query for server state
• Validating navigation and route transitions with TanStack Router
• Unit and integration tests for forms and tables using TanStack Form/Table
• When you need deterministic tests for query caching, invalidation, and retries
• When migrating to Vite/Vitest and needing TanStack-compatible test patterns

Best practices

• Wrap components with provided test providers to mirror app context (QueryClient, Router)
• Mock network responses and time-based behaviors to keep tests deterministic
• Test side effects like cache updates and invalidations, not just rendered output
• Prefer small, focused tests: isolate query behavior or router transitions per test
• Use the supplied templates to standardize setup and reduce duplicated fixtures

Example use cases

• Write a Vitest suite that asserts data refetch and cache invalidation after a mutation
• Simulate route changes and verify guarded routes, params, and nested layouts with TanStack Router
• Test a table component’s sorting and pagination by stubbing data responses
• Validate form validation flows and submission side effects with mocked mutations
• Create a snapshot of query loading, success, and error states for a component using QueryClient

FAQ