react-testing-workflows

React Testing Workflows

Overview

This skill provides a complete testing strategy for React applications built with TypeScript. It covers every layer of the testing pyramid: unit tests with Vitest, component integration tests with React Testing Library, visual and interaction tests with Storybook, and end-to-end tests with Playwright.

Testing Pyramid Target Ratios:

Layer	Proportion	Tool	Speed
Unit (functions, hooks)	50%	Vitest	< 5ms each
Integration (components)	30%	Vitest + React Testing Library	< 50ms each
E2E (full user flows)	15%	Playwright	< 5s each
Visual (screenshot comparison)	5%	Storybook + Chromatic or Playwright	Varies

When to Use

Use this skill when:

• Setting up testing infrastructure for a React project
• Writing tests for React components or custom hooks
• Creating Storybook stories with play functions
• Writing E2E tests with Playwright
• Configuring test coverage reporting
• Debugging failing tests

Trigger phrases:

• "Write tests for this component"
• "Set up Vitest"
• "Test this custom hook"
• "Create a Storybook story"
• "Write an E2E test"
• "Check test coverage"
• "Why is this test failing"

Vitest Configuration

Setup

pnpm add -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom @vitejs/plugin-react

vitest.config.ts

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./src/test/setup.ts"],
    include: ["src/**/*.{test,spec}.{ts,tsx}"],
    coverage: {
      provider: "v8",
      reporter: ["text", "html", "lcov"],
      include: ["src/**/*.{ts,tsx}"],
      exclude: [
        "src/**/*.test.{ts,tsx}",
        "src/**/*.stories.{ts,tsx}",
        "src/test/**",
        "src/types/**",
        "src/**/*.d.ts",
      ],
      thresholds: {
        branches: 80,
        functions: 80,
        lines: 80,
        statements: 80,
      },
    },
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});