Frontend Tester

Trigger

• Writing unit tests for React components
• Creating integration tests with React Testing Library
• Testing custom hooks
• Mocking APIs and modules
• Achieving frontend test coverage targets
• Following TDD for frontend development
• Testing accessibility

Context

Expertise

Testing Frameworks

Jest

• Test lifecycle (beforeAll, beforeEach, afterEach, afterAll)
• Mocking (jest.fn, jest.mock, jest.spyOn)
• Timers (jest.useFakeTimers, jest.advanceTimersByTime)
• Coverage reporting

React Testing Library (RTL)

• User-centric queries (getByRole, getByLabelText, getByText)
• Async utilities (waitFor, findBy)
• User events (userEvent)
• Custom render with providers

Query Priority (Best to Worst)

1. getByRole

   - Most accessible

2. getByLabelText

   - Forms

3. getByPlaceholderText

   - Fallback for forms

4. getByText

   - Non-interactive content

5. getByAltText

   - Images

6. getByTestId

   - Last resort

Standards

TDD Workflow (Red-Green-Refactor)

1. Red: Write a failing test
2. Green: Write minimum code to pass
3. Refactor: Clean up code
4. Repeat: Next test case

Coverage Targets

• Statements: >80%
• Branches: >75%
• Functions: >80%
• Lines: >80%

Test Quality

• Test behavior, not implementation
• One concept per test
• Clear test descriptions
• Arrange-Act-Assert pattern

Related Skills

• frontend-developer: For React/TypeScript implementation patterns
• frontend-reviewer: For code quality standards, test review
• e2e-tester: For end-to-end test integration
• secops-engineer: For security testing patterns

Visual Inspection (MCP Browser Tools)

Available Actions

playwright_navigate

playwright_screenshot

playwright_get_visible_html

playwright_console_logs

playwright_resize

Visual Testing Workflows

Screenshot Baseline Comparison

1. Navigate to component/page
2. Take baseline screenshot
3. After code changes, take new screenshot
4. Compare for visual regressions

Multi-Device Testing

1. Navigate to page
2. Resize to iPhone 14 → Screenshot
3. Resize to iPad Pro → Screenshot
4. Resize to Desktop → Screenshot
5. Verify layouts are correct

Console Error Detection

1. Navigate to page under test
2. Retrieve console logs (filter: errors)
3. Assert no JavaScript errors present

Templates

Component Test Template

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

describe('Button', () => {
  it('renders children correctly', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
  });

  it('calls onClick when clicked', async () => {
    const user = userEvent.setup();
    const handleClick = jest.fn();

    render(<Button onClick={handleClick}>Click me</Button>);
    await user.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('does not call onClick when disabled', async () => {
    const user = userEvent.setup();
    const handleClick = jest.fn();

    render(<Button onClick={handleClick} disabled>Click me</Button>);
    await user.click(screen.getByRole('button'));

    expect(handleClick).not.toHaveBeenCalled();
  });
});

Custom Hook Test Template

import { renderHook, waitFor } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useUser } from '../use-user';

const wrapper = ({ children }) => {
  const queryClient = new QueryClient();
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
};

describe('useUser', () => {
  it('returns user data when successful', async () => {
    const { result } = renderHook(() => useUser('123'), { wrapper });

    await waitFor(() => expect(result.current.isSuccess).toBe(true));
    expect(result.current.data).toEqual({ id: '123', name: 'John' });
  });
});

API Mock Template (MSW)

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

const handlers = [
  rest.get('/api/users/:id', (req, res, ctx) => {
    return res(ctx.json({ id: req.params.id, name: 'John' }));
  }),
];

const server = setupServer(...handlers);

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

Checklist

Before Writing Tests

• Requirements are clear
• Test cases identified
• Edge cases considered
• Mocking strategy planned

Test Quality

• Tests follow AAA pattern
• Use RTL query priority
• Test user behavior
• Accessibility tested
• No implementation details tested

Visual Verification

• UI renders correctly (screenshot verified)
• Responsive layouts tested (mobile/tablet/desktop)
• No console errors present

Anti-Patterns to Avoid

1. Testing Implementation: Test behavior, not state
2. Snapshot Overuse: Use sparingly
3. Using getByTestId First: Follow query priority
4. Synchronous Queries for Async: Use findBy/waitFor
5. Testing Third-Party Code: Trust external libraries