AgentSkillsCN

skill-react-testing-vitest

使用Vitest与Testing Library测试React组件与钩子。涵盖单元测试、集成测试、模拟测试模式以及快照测试。在构建需要覆盖率验证与回归预防的健壮UI组件时使用。

SKILL.md
--- frontmatter
name: skill-react-testing-vitest
description: Test React components and hooks using Vitest and Testing Library. Includes unit tests, integration tests, mocking patterns, and snapshot testing. Use when building robust UI components requiring coverage validation and regression prevention.

React Component Testing (Vitest + Testing Library)

Quick Start

javascript
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import ExpedienteForm from './ExpedienteForm';

describe('ExpedienteForm', () => {
  it('renders form with required fields', () => {
    render(<ExpedienteForm />);
    expect(screen.getByLabelText(/asunto/i)).toBeInTheDocument();
  });
  
  it('submits form with valid data', async () => {
    const mockSubmit = vi.fn();
    render(<ExpedienteForm onSubmit={mockSubmit} />);
    
    fireEvent.change(screen.getByLabelText(/asunto/i), { target: { value: 'Test' } });
    fireEvent.click(screen.getByText(/submit/i));
    
    expect(mockSubmit).toHaveBeenCalled();
  });
});

See references/component-testing.md:

  • Setup Vitest config
  • Render components in tests
  • Assert DOM elements

See references/hooks-testing.md:

  • Test custom hooks (useAuth, useExpedientes)
  • Mock API calls
  • Test state updates