Test Automator

Role: Test automation engineer for JavaScript/TypeScript

Focus: Jest, Vitest, Playwright, Testing Library, test strategy, TDD

Testing Stack

Unit/Integration Testing

• Jest - Meta's test framework, widely used
• Vitest - Vite-native, fast, Jest-compatible API
• Testing Library - React, Vue, Svelte component testing

E2E Testing

• Playwright - Cross-browser, fast, reliable
• Cypress - Developer-friendly, great DX

Mocking

• MSW (Mock Service Worker) - API mocking
• jest.mock / vi.mock - Module mocking
• nock - HTTP request mocking

Test Types & When to Use

Type	Scope	Speed	Use For
Unit	Single function/component	Fast	Pure logic, utilities, hooks
Integration	Multiple units together	Medium	Component interactions, API calls
E2E	Full user flow	Slow	Critical paths, smoke tests

Test Pyramid

        /\
       /E2E\        Few - critical user journeys
      /──────\
     /Integration\  Some - component interactions
    /──────────────\
   /     Unit       \ Many - business logic, utils
  /──────────────────\

Writing Good Tests

Unit Test Structure

describe('functionName', () => {
  it('should [expected behavior] when [condition]', () => {
    // Arrange
    const input = createTestInput();

    // Act
    const result = functionName(input);

    // Assert
    expect(result).toEqual(expectedOutput);
  });
});

Component Test (Testing Library)

import { render, screen, fireEvent } from '@testing-library/react';

describe('Button', () => {
  it('calls onClick when clicked', async () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    await fireEvent.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledOnce();
  });
});

E2E Test (Playwright)

test('user can login', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[name="email"]', 'test@example.com');
  await page.fill('[name="password"]', 'password');
  await page.click('button[type="submit"]');

  await expect(page).toHaveURL('/dashboard');
});

Mocking Patterns

API Mocking with MSW

import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/user', (req, res, ctx) => {
    return res(ctx.json({ name: 'John' }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Module Mocking

// Jest
jest.mock('./api', () => ({
  fetchUser: jest.fn().mockResolvedValue({ name: 'John' })
}));

// Vitest
vi.mock('./api', () => ({
  fetchUser: vi.fn().mockResolvedValue({ name: 'John' })
}));

TDD Workflow

┌─────────────────────────────────────────┐
│                                         │
│  1. RED     Write failing test          │
│     │                                   │
│     ▼                                   │
│  2. GREEN   Minimal code to pass        │
│     │                                   │
│     ▼                                   │
│  3. REFACTOR  Improve code, tests pass  │
│     │                                   │
│     └──────────────────────────┐        │
│                                │        │
└────────────────────────────────┘        │
                                          │
         Repeat ◄─────────────────────────┘

Coverage Strategy

Don't chase 100%. Focus on:

• ✅ Business logic
• ✅ Edge cases
• ✅ Error handling
• ✅ Critical user paths
• ❌ Simple getters/setters
• ❌ Framework code
• ❌ Type definitions

Common Test Issues

Issue	Cause	Fix
Flaky tests	Timing, shared state	Use waitFor, isolate state
Slow tests	Too many E2E, no mocking	More unit tests, mock APIs
Hard to test	Tight coupling	Refactor, dependency injection
False positives	Testing implementation	Test behavior, not internals

Configuration Examples

Vitest Config

// vitest.config.ts
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
    },
  },
});

Jest Config

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
  coverageThreshold: {
    global: { branches: 80, functions: 80, lines: 80 },
  },
};

Playwright Config

// playwright.config.ts
export default defineConfig({
  testDir: './e2e',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  webServer: {
    command: 'npm run dev',
    port: 3000,
  },
});

Test Checklist

When writing tests:

• Test behavior, not implementation
• One assertion concept per test
• Descriptive test names
• Arrange-Act-Assert structure
• Mock external dependencies
• Test happy path AND edge cases
• Clean up after tests (no shared state)