testing

Testing Skill

Use this skill when writing tests, setting up testing infrastructure, ensuring code quality through automated testing, or implementing test-driven development.

When to Use This Skill

• Writing unit tests for components or functions
• Creating integration tests for API endpoints
• Setting up end-to-end tests with Cypress
• Configuring test coverage requirements
• Implementing test-driven development (TDD)
• Setting up CI/CD test automation
• Debugging failing tests

Core Technologies

• Jest - Test runner and assertion library
• React Testing Library - Component testing
• Supertest - HTTP assertion for backend
• MSW (Mock Service Worker) - API mocking
• Cypress - End-to-end testing

Testing Philosophy

Testing Pyramid

        /\
       /  \
      / E2E \          Few - Slow - Expensive
     /______\
    /        \
   /Integration\      Some - Medium - Moderate
  /____________\
 /              \
/  Unit Tests    \    Many - Fast - Cheap
/__________________\

Key Principles

1. Test Behavior, Not Implementation - Focus on what, not how
2. Keep Tests Simple - One assertion per test when possible
3. Make Tests Independent - No test should depend on another
4. Write Tests First - Test-Driven Development (TDD)
5. Maintain Tests - Update tests when code changes

Quick Reference

Frontend Component Test

import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MyComponent } from './MyComponent';

describe('MyComponent', () => {
  test('renders without crashing', () => {
    render(<MyComponent />);
    expect(screen.getByText(/expected text/i)).toBeInTheDocument();
  });

  test('handles user interaction', async () => {
    const user = userEvent.setup();
    render(<MyComponent />);
    
    const button = screen.getByRole('button', { name: /submit/i });
    await user.click(button);
    
    expect(screen.getByText(/success/i)).toBeInTheDocument();
  });

  test('displays error state', () => {
    render(<MyComponent error="Error message" />);
    expect(screen.getByText(/error message/i)).toBeInTheDocument();
  });
});