Week 16: Unit & Component Testing (Jest + RNTL)

1. Jest Config & Mocking Native Modules

npx expo install jest-expo jest @testing-library/react-native --dev

{
  "scripts": { "test": "jest" },
  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)"
    ]
  }
}

jest-expo ships with mocks for most Expo native modules already — calling Notifications.scheduleNotificationAsync in a test doesn't try to talk to a real device; it resolves against a mock. A module without a built-in mock needs one added manually in a jest.mock() call, pointing at a fake implementation matching its real shape.

2. React Native Testing Library

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

test('removing an item removes it from the list', () => {
  render(<CartScreen />);

  expect(screen.getByText('Wireless Mouse x1')).toBeOnTheScreen();

  fireEvent.press(screen.getByText('Wireless Mouse x1'));

  expect(screen.queryByText('Wireless Mouse x1')).not.toBeOnTheScreen();
});

RNTL's philosophy, carried over from its web counterpart: query the screen the way a user would find something — by visible text, a role, or an accessibility label — not by internal component names or implementation details a refactor could change without actually breaking anything real.

3. Testing Hooks & Async Code

import { render, screen, waitFor } from '@testing-library/react-native';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import PostsScreen from './PostsScreen';

function renderWithProviders(ui: React.ReactElement) {
  const queryClient = new QueryClient();
  return render(
    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
  );
}

test('shows posts once loaded', async () => {
  renderWithProviders(<PostsScreen />);

  expect(screen.getByTestId('loading-spinner')).toBeOnTheScreen();

  await waitFor(() => {
    expect(screen.getByText('First Post')).toBeOnTheScreen();
  });
});

waitFor polls its callback until it stops throwing (or times out) — the correct way to assert on anything that resolves asynchronously, rather than a fixed setTimeout that's either too slow or flaky under load.

4. Snapshot Tests: When They Help

A snapshot test records a component's rendered output and fails if it changes — cheap to write, but a large snapshot diff on every unrelated change trains a team to blindly run jest --updateSnapshot without reading it, which defeats the point.

• Good fit: small, stable, presentational components (a badge, a price formatter) where "did the output change at all" is exactly the right question.
• Poor fit: whole screens, or anything that changes often for legitimate reasons — an assertion like getByText('First Post') stays meaningful there; a full-screen snapshot mostly just tracks churn.

5. Hands-on Exercise

6. Knowledge Check

Four quick questions. Expand each to check your answer.