What to Test in an App

A test suite is code that runs your code and fails the build when the answer is wrong. On mobile the payoff is larger than on a server: a bug you ship has to pass a store review before the fix reaches anyone.

Three layers, very different costs

Logic tests cover plain functions, reducers and hooks. They run in Node in milliseconds, so you can have hundreds. Component tests render one component and assert what a user would see; fast enough for dozens. End-to-end tests drive the real app on a simulator, and each one takes minutes, so you automate three journeys, not thirty.

None of this opens a browser. There is no DOM here, no document and no querySelector. A component test renders a tree of native components, which you query by text and by accessibility role.

Getting the first run green

Expo SDK 57 pairs with jest-expo 57, a Jest preset that mocks the native half of the Expo SDK so the imports resolve under Node. Add @testing-library/react-native 14 for component tests; it replaces react-test-renderer, which is deprecated under React 19.

What trips people up

Two things. The preset mocks Expo's own modules only, so other native libraries stay unmocked until you write the mock yourself. And version 14 of the testing library made render, fireEvent and act asynchronous, so an older example copied from a blog post fails on a missing await.

// __tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react-native';
import { greetingFor } from '../lib/greeting';
import Greeting from '../components/Greeting';
// Greeting renders: <Text>{`${greetingFor(hour)}, ${name}`}</Text>

describe('greetingFor', () => {
  // Layer one: a pure function. No React, no device, microseconds to run.
  it('splits the day into three parts', () => {
    expect(greetingFor(8)).toBe('Good morning');
    expect(greetingFor(13)).toBe('Good afternoon');
    expect(greetingFor(21)).toBe('Good evening');
  });

  it('treats midday as the afternoon boundary', () => {
    expect(greetingFor(12)).toBe('Good afternoon');
  });
});

describe('<Greeting />', () => {
  // Layer two: the component. hour is a prop, so the test owns the clock.
  it('shows the greeting and the name together', async () => {
    // render() is async in React Native Testing Library 14: await it.
    await render(<Greeting name="Ada" hour={8} />);

    expect(screen.getByText('Good morning, Ada')).toBeOnTheScreen();
  });
});

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:ci": "jest --ci --coverage"
  },
  "jest": {
    "projects": [
      { "preset": "jest-expo/ios" },
      { "preset": "jest-expo/android" }
    ]
  }
}

# expo install picks versions that match the installed SDK.
npx expo install jest-expo jest @types/jest --dev

# Testing library 14 needs test-renderer 1.x as a peer dependency.
npx expo install @testing-library/react-native test-renderer --dev

npm test                       # whole suite, once
npx jest Greeting              # only files matching "Greeting"
npx jest -t 'splits the day'   # only tests whose name matches

// __tests__/PriceTag.test.tsx
import { render, screen } from '@testing-library/react-native';
import PriceTag from '../components/PriceTag';

it('formats the price and marks it as reduced', async () => {
  await render(<PriceTag cents={2599} onSale />);

  // Each line names one fact a user can see.
  expect(screen.getByText('$25.99')).toBeOnTheScreen();
  expect(screen.getByText('Sale')).toBeOnTheScreen();
});

it('hides the badge when the item is not reduced', async () => {
  await render(<PriceTag cents={2599} onSale={false} />);

  // queryBy* returns null instead of throwing, so it can prove absence.
  expect(screen.queryByText('Sale')).not.toBeOnTheScreen();
});