Lesson 22 / 25

Testing

Unit, component and end-to-end tests.

Jest, Testing Library, Maestro and Detox

Jest runs unit and component tests in Node; Expo provides the jest-expo preset and React Native has its own preset. React Native Testing Library renders components in a test environment and queries them the way a user would (getByText, getByRole, getByLabelText), with fireEvent or userEvent for interactions. Native modules are usually mocked in these tests. End-to-end (E2E) tests drive the real app on a simulator or device: Maestro uses readable YAML flows, while Detox is a gray-box framework written in JavaScript that synchronises with the app. Keep most tests fast and focused, and a few E2E flows for critical paths such as sign-in and checkout.

From laptop to app stores

Tests catch regressions, EAS builds and submits signed binaries, updates ship fixes, and tooling shows what breaks.

Four ideas: testing, building and releasing, debugging and monitoring, a release checklist.
Figure 8.1 — Test, build, release and observe.

A component test

React Native Testing Library with Jest; check the docs for your version.

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

test("increments when tapped", () => {
  render(<Counter />);

  expect(screen.getByText("Tapped 0 times")).toBeTruthy();
  fireEvent.press(screen.getByText("Tap me"));
  expect(screen.getByText("Tapped 1 times")).toBeTruthy();
});

A Maestro flow

A YAML E2E flow for sign-in (sketch).

# flows/sign-in.yaml
# appId: com.example.myapp
# ---
# - launchApp
# - tapOn: "Email"
# - inputText: "test@example.com"
# - tapOn: "Password"
# - inputText: "correct-horse"
# - tapOn: "Sign in"
# - assertVisible: "Welcome back"

maestro test flows/sign-in.yaml

Test behaviour, not implementation

Query by text, role and accessibility label rather than internal state. Good accessibility labels make tests easier and the app better.

Quick check: Which tool is designed for end-to-end tests on a real app?

  • Platform.select
  • StyleSheet
  • AsyncStorage
  • Maestro or Detox
Answer

Maestro or Detox — E2E tools drive the app on a simulator or device.