# Testing — React Native

Source: https://www.skillbyai.com/en/react-native/x-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.](assets/figures/react-native/section-8-map.svg) — Figure 8.1 — Test, build, release and observe.

## A component test

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

```tsx
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).

```bash
# 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.

**Quiz:** Which tool is designed for end-to-end tests on a real app?

- [ ] Platform.select
- [ ] StyleSheet
- [ ] AsyncStorage
- [x] Maestro or Detox

*Answer:* Maestro or Detox. E2E tools drive the app on a simulator or device.