Testing with Jest & React Native Testing Library

Why test at all

A test is code that checks your other code does the right thing — automatically. Instead of tapping through the app by hand after every change, you run the tests and they tell you in seconds if anything broke. Serious bootcamps and job descriptions expect this, because tests catch regressions (old features breaking when you add new ones) before users do.

Two tools cover most React Native testing:

• Jest — the test runner and assertion library. It finds your test files, runs them, and lets you state what you expect (e.g. "this should equal 4").
• React Native Testing Library (RNTL) — renders a component in a test environment so you can check what is on screen and simulate taps, the way a user would.

New Expo apps come with the jest-expo preset configured. Add the testing library (one-time):

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

A unit test with Jest

Start with the simplest case: a plain function. A unit test checks one small piece in isolation. Jest’s test describes a case, and expect(...).toBe(...) states what should be true. Say we have a helper that adds tax:

// total.js
export function withTax(price) {
  return price * 1.18;   // add 18% tax
}

// total.test.js
import { withTax } from './total';

test('adds 18% tax to a price', () => {
  expect(withTax(100)).toBe(118);
});

Testing a component with RNTL

Components need more than a value check — you want to know they render the right text and respond to taps. RNTL’s render draws the component in memory, screen.getByText finds text on it, and fireEvent.press simulates a tap. Here we test a counter:

import { render, screen, fireEvent } from '@testing-library/react-native';
import { useState } from 'react';
import { Text, Button, View } from 'react-native';

function Counter() {
  const [n, setN] = useState(0);
  return (
    <View>
      <Text>Count: {n}</Text>
      <Button title="Add" onPress={() => setN(n + 1)} />
    </View>
  );
}

test('increments the count when Add is pressed', () => {
  render(<Counter />);
  expect(screen.getByText('Count: 0')).toBeTruthy();   // starts at 0
  fireEvent.press(screen.getByText('Add'));            // tap the button
  expect(screen.getByText('Count: 1')).toBeTruthy();   // now 1
});

How a test run works, step by step

When you run npm test, here is what happens, in order:

1. Jest finds every file ending in .test.js (or .test.tsx) in your project.
2. It runs each test(...) block one by one.
3. For component tests, RNTL render draws the component in a fake screen held in memory (no real phone needed).
4. Your expect(...) lines and fireEvent calls check the output and simulate user actions.
5. Each assertion either passes (✓) or fails (✗) with a message showing what was expected versus what it got.
6. Jest prints a summary — how many passed and failed — and returns success only if every test passed, which is what a CI pipeline checks before allowing a merge.