Guide React Native · 5/6

Testing

Ce chapitre n'est disponible qu'en anglais pour le moment.

React Native apps are usually tested in three layers: plain logic with Jest, components with React Native Testing Library, and complete user flows on real devices with end-to-end tools such as Detox or Maestro.

Layer	Tools	Runs on
Unit	Jest	Node.js
Component	Jest + React Native Testing Library	Node.js (rendered without native code)
End-to-end	Detox, Maestro	emulators, simulators, devices

Setting up Jest

The Community CLI template ships with Jest already configured using the react-native preset. In an Expo project, add the jest-expo preset:

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

{
  "scripts": {
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  }
}

The preset provides mocks for React Native modules and the transform setup, so all you need are test files (*.test.tsx or a __tests__ folder).

Unit tests

Logic that has nothing to do with the UI, such as calculations and formatting, is tested with plain Jest. Moving logic out of components into functions makes it much easier to test.

// price.ts
export const formatPrice = (cents: number) => `$${(cents / 100).toFixed(2)}`;

// price.test.ts
import { formatPrice } from "./price";

test("formats cents as dollars", () => {
  expect(formatPrice(1250)).toBe("$12.50");
});

Component tests

React Native Testing Library (RNTL) renders a component, finds elements by the text or accessibility role a user would see, and simulates actions such as presses and typing. The guiding principle is to test what the user sees rather than implementation details.

import { render, screen, userEvent } from "@testing-library/react-native";
import { Counter } from "./Counter";

test("increments when pressed", async () => {
  const user = userEvent.setup();
  render(<Counter />);

  expect(screen.getByText("Count: 0")).toBeOnTheScreen();
  await user.press(screen.getByText("Increment"));
  expect(screen.getByText("Count: 1")).toBeOnTheScreen();
});

RNTL provides matchers such as toBeOnTheScreen and toHaveTextContent; older versions may require importing @testing-library/react-native/extend-expect in a setup file. Queries come in three flavors: getBy... (immediate, throws if missing), (returns null if missing) and (waits until the element appears).

Des questions sur ce chapitre ?

Layer

Tools

Runs on

Unit

Jest

Node.js

Component

Jest + React Native Testing Library

Node.js (rendered without native code)

End-to-end

Detox, Maestro

emulators, simulators, devices

Setting up Jest

The Community CLI template ships with Jest already configured using the react-native preset. In an Expo project, add the jest-expo preset:

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

{ "scripts": { "test": "jest --watchAll" }, "jest": { "preset": "jest-expo" } }

The preset provides mocks for React Native modules and the transform setup, so all you need are test files (*.test.tsx or a __tests__ folder).

Unit tests

Logic that has nothing to do with the UI, such as calculations and formatting, is tested with plain Jest. Moving logic out of components into functions makes it much easier to test.

// price.ts export const formatPrice = (cents: number) => `$${(cents / 100).toFixed(2)}`; // price.test.ts import { formatPrice } from "./price"; test("formats cents as dollars", () => { expect(formatPrice(1250)).toBe("$12.50"); });

Component tests

import { render, screen, userEvent } from "@testing-library/react-native"; import { Counter } from "./Counter"; test("increments when pressed", async () => { const user = userEvent.setup(); render(<Counter />); expect(screen.getByText("Count: 0")).toBeOnTheScreen(); await user.press(screen.getByText("Increment")); expect(screen.getByText("Count: 1")).toBeOnTheScreen(); });

Testing

Setting up Jest

Unit tests

Component tests

Testing

Setting up Jest

Unit tests

Component tests

Async code and mocks

End-to-end tests: Detox and Maestro

Summary

0 commentaire