testing-strategies

Comprehensive testing strategies and patterns for ensuring code quality.

Testing Pyramid

              /\
             /E2E\           5%  - Critical user journeys
            /------\
           / Integ  \        15% - Service boundaries
          /----------\
         /    Unit    \      80% - Component logic
        /--------------\

Unit Testing Patterns

Arrange-Act-Assert (AAA)

describe('calculateTotal', () => {
  it('should apply discount correctly', () => {
    // Arrange
    const items = [{ price: 100, quantity: 1 }];
    const discount = 0.1;

    // Act
    const result = calculateTotal(items, discount);

    // Assert
    expect(result).toBe(90);
  });
});

Test Isolation

describe('UserService', () => {
  let service: UserService;
  let mockRepo: MockUserRepository;

  beforeEach(() => {
    // Fresh instances for each test
    mockRepo = new MockUserRepository();
    service = new UserService(mockRepo);
  });

  afterEach(() => {
    vi.clearAllMocks();
  });
});

Parameterized Tests

describe('validateEmail', () => {
  it.each([
    ['test@example.com', true],
    ['user.name@domain.co.uk', true],
    ['invalid', false],
    ['@nodomain.com', false],
    ['no@tld', false],
  ])('validates %s as %s', (email, expected) => {
    expect(validateEmail(email)).toBe(expected);
  });
});

Testing Edge Cases

describe('divide', () => {
  it('should handle positive numbers', () => {
    expect(divide(10, 2)).toBe(5);
  });

  it('should handle negative numbers', () => {
    expect(divide(-10, 2)).toBe(-5);
  });

  it('should handle zero dividend', () => {
    expect(divide(0, 5)).toBe(0);
  });

  it('should throw on division by zero', () => {
    expect(() => divide(10, 0)).toThrow('Division by zero');
  });

  it('should handle floating point', () => {
    expect(divide(1, 3)).toBeCloseTo(0.333, 2);
  });
});

Component Testing

React Testing Library

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

describe('LoginForm', () => {
  const mockOnSubmit = vi.fn();

  beforeEach(() => {
    mockOnSubmit.mockClear();
  });

  it('submits with valid data', async () => {
    const user = userEvent.setup();
    render(<LoginForm onSubmit={mockOnSubmit} />);

    await user.type(screen.getByLabelText(/email/i), 'test@example.com');
    await user.type(screen.getByLabelText(/password/i), 'password123');
    await user.click(screen.getByRole('button', { name: /submit/i }));

    await waitFor(() => {
      expect(mockOnSubmit).toHaveBeenCalledWith({
        email: 'test@example.com',
        password: 'password123',
      });
    });
  });

  it('shows validation errors', async () => {
    const user = userEvent.setup();
    render(<LoginForm onSubmit={mockOnSubmit} />);

    await user.click(screen.getByRole('button', { name: /submit/i }));

    expect(await screen.findByText(/email is required/i)).toBeInTheDocument();
    expect(mockOnSubmit).not.toHaveBeenCalled();
  });
});

Testing Hooks

import { renderHook, act, waitFor } from '@testing-library/react';

describe('useCounter', () => {
  it('increments counter', () => {
    const { result } = renderHook(() => useCounter(0));

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });
});

describe('useAsync', () => {
  it('handles async operation', async () => {
    const mockFetch = vi.fn().mockResolvedValue({ data: 'test' });

    const { result } = renderHook(() => useAsync(mockFetch));

    expect(result.current.isLoading).toBe(true);

    await waitFor(() => {
      expect(result.current.isLoading).toBe(false);
    });

    expect(result.current.data).toEqual({ data: 'test' });
  });
});

Integration Testing

API Testing with Hono

import { testClient } from 'hono/testing';
import app from '../src/index';

describe('Users API', () => {
  const client = testClient(app);

  beforeEach(async () => {
    await db.delete(users);
  });

  it('creates and retrieves user', async () => {
    // Create
    const createRes = await client.api.v1.users.$post({
      json: { name: 'Test', email: 'test@example.com', password: 'pass123' },
    });
    expect(createRes.status).toBe(201);
    const created = await createRes.json();

    // Retrieve
    const getRes = await client.api.v1.users[':id'].$get({
      param: { id: created.data.id },
    });
    expect(getRes.status).toBe(200);
    const retrieved = await getRes.json();

    expect(retrieved.data.email).toBe('test@example.com');
  });
});

Database Testing

describe('UserRepository', () => {
  const repo = new UserRepository();

  beforeEach(async () => {
    await db.delete(users);
  });

  it('creates and finds user', async () => {
    const created = await repo.create({
      name: 'Test User',
      email: 'test@example.com',
    });

    const found = await repo.findById(created.id);

    expect(found).toEqual(created);
  });

  it('returns null for non-existent user', async () => {
    const found = await repo.findById('non-existent-id');
    expect(found).toBeNull();
  });
});

E2E Testing with Playwright

import { test, expect } from '@playwright/test';

test.describe('User Flow', () => {
  test('complete registration and login flow', async ({ page }) => {
    // Register
    await page.goto('/register');
    await page.fill('[name="email"]', 'new@example.com');
    await page.fill('[name="password"]', 'Password123!');
    await page.click('button[type="submit"]');

    // Verify redirect to login
    await expect(page).toHaveURL('/login');

    // Login
    await page.fill('[name="email"]', 'new@example.com');
    await page.fill('[name="password"]', 'Password123!');
    await page.click('button[type="submit"]');

    // Verify dashboard access
    await expect(page).toHaveURL('/dashboard');
    await expect(page.locator('h1')).toContainText('Dashboard');
  });
});

Mocking Strategies

MSW (Mock Service Worker)

import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';

const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json({
      success: true,
      data: [{ id: '1', name: 'Test User' }],
    });
  }),

  http.post('/api/users', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json(
      { success: true, data: { id: '2', ...body } },
      { status: 201 }
    );
  }),
];

export const server = setupServer(...handlers);

// Setup in test file
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Vitest Mocks

// Mock module
vi.mock('./api', () => ({
  fetchUsers: vi.fn().mockResolvedValue([{ id: '1', name: 'Test' }]),
}));

// Mock implementation
const mockFetch = vi.fn();
mockFetch
  .mockResolvedValueOnce({ data: 'first' })
  .mockResolvedValueOnce({ data: 'second' });

// Spy on method
const spy = vi.spyOn(console, 'log');
expect(spy).toHaveBeenCalledWith('message');

Coverage Goals

| Metric | Minimum | Target | |--------|---------|--------| | Statements | 70% | 85% | | Branches | 65% | 80% | | Functions | 70% | 85% | | Lines | 70% | 85% |

Test Organization

tests/
├── unit/              # Unit tests
│   ├── utils/
│   └── services/
├── integration/       # Integration tests
│   ├── api/
│   └── db/
├── e2e/              # E2E tests
│   ├── auth.spec.ts
│   └── dashboard.spec.ts
├── fixtures/         # Test data
├── mocks/            # Mock implementations
└── setup.ts          # Global setup