taewoongheo/tdd-workflow

TDD Workflow — React Native Testing Patterns

Test File Location

Co-locate tests with source:

components/
  Button.tsx
  Button.test.tsx      # unit test next to component
hooks/
  useAuth.ts
  useAuth.test.ts

Or use __tests__/ for integration tests:

__tests__/
  flows/
    login.test.tsx     # multi-screen flow tests

What to Test

| Test | Don't Test | |------|-----------| | User-visible behavior | Implementation details | | Button press triggers action | useState was called | | Error message appears on failure | Internal state shape | | List renders correct items | Component re-render count | | Hook returns expected values | Reanimated worklet internals | | Navigation on action | Animation physics values |

Component Test Pattern

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

describe('SubmitButton', () => {
  it('calls onPress when tapped', () => {
    const onPress = jest.fn();
    render(<SubmitButton onPress={onPress} label="Submit" />);

    fireEvent.press(screen.getByText('Submit'));
    expect(onPress).toHaveBeenCalledTimes(1);
  });

  it('shows loading indicator when loading', () => {
    render(<SubmitButton onPress={jest.fn()} label="Submit" loading />);

    expect(screen.getByTestId('loading-indicator')).toBeTruthy();
    expect(screen.queryByText('Submit')).toBeNull();
  });

  it('does not call onPress when disabled', () => {
    const onPress = jest.fn();
    render(<SubmitButton onPress={onPress} label="Submit" disabled />);

    fireEvent.press(screen.getByText('Submit'));
    expect(onPress).not.toHaveBeenCalled();
  });
});

Hook Test Pattern

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

describe('useCounter', () => {
  it('starts at initial value', () => {
    const { result } = renderHook(() => useCounter(5));
    expect(result.current.count).toBe(5);
  });

  it('increments', () => {
    const { result } = renderHook(() => useCounter(0));
    act(() => result.current.increment());
    expect(result.current.count).toBe(1);
  });
});

Async Test Pattern

it('shows user data after fetch', async () => {
  mockSupabase.from('users').select.mockResolvedValue({
    data: [{ id: '1', name: 'Alice' }],
    error: null,
  });

  render(<UserList />);

  await waitFor(() => {
    expect(screen.getByText('Alice')).toBeTruthy();
  });
});

it('shows error on fetch failure', async () => {
  mockSupabase.from('users').select.mockResolvedValue({
    data: null,
    error: { message: 'Network error' },
  });

  render(<UserList />);

  await waitFor(() => {
    expect(screen.getByText(/error/i)).toBeTruthy();
  });
});

Mock Strategies

Supabase

// __mocks__/supabase.ts
export const mockSupabase = {
  from: jest.fn(() => ({
    select: jest.fn().mockResolvedValue({ data: [], error: null }),
    insert: jest.fn().mockResolvedValue({ data: [], error: null }),
    update: jest.fn().mockResolvedValue({ data: [], error: null }),
    delete: jest.fn().mockResolvedValue({ data: [], error: null }),
  })),
  auth: {
    signInWithPassword: jest.fn(),
    signUp: jest.fn(),
    signOut: jest.fn(),
    getSession: jest.fn().mockResolvedValue({ data: { session: null } }),
    onAuthStateChange: jest.fn(() => ({ data: { subscription: { unsubscribe: jest.fn() } } })),
  },
};

jest.mock('@/lib/supabase', () => ({ supabase: mockSupabase }));

Reanimated

// jest.setup.ts
jest.mock('react-native-reanimated', () =>
  require('react-native-reanimated/mock')
);

Expo modules

jest.mock('expo-haptics', () => ({
  impactAsync: jest.fn(),
  notificationAsync: jest.fn(),
  selectionAsync: jest.fn(),
}));

jest.mock('expo-secure-store', () => ({
  getItemAsync: jest.fn(),
  setItemAsync: jest.fn(),
  deleteItemAsync: jest.fn(),
}));

Navigation

const mockRouter = {
  push: jest.fn(),
  replace: jest.fn(),
  back: jest.fn(),
};
jest.mock('expo-router', () => ({
  useRouter: () => mockRouter,
  useLocalSearchParams: () => ({}),
}));

Red-Green-Refactor Cycle

1. Red: Write test that describes desired behavior. Run it. Confirm FAIL.
2. Green: Write minimum code to make test pass. No extras.
3. Refactor: Clean up while tests stay green. Extract hooks, split components.
4. Verify: npx tsc --noEmit && npx jest
5. Repeat for next behavior.

Coverage Guidelines

• Aim for behavior coverage, not line coverage
• Critical paths (auth, payments, data mutations): thorough testing
• UI layout/styling: skip unit tests, verify visually
• Animations: skip unit tests, verify with interaction audit
• Target: 80%+ on hooks and utilities, pragmatic on components

Answer in Korean.