Testing

Ensure your app's reliability with robust Unit and End-to-End testing strategies.

Overview

This starter template comes pre-configured with a modern testing stack designed for React Native:

Unit & Integration Testing: Powered by Jest and React Native Testing Library.
End-to-End (E2E) Testing: Powered by Maestro for simple and effective UI automation.

Unit Testing

Unit tests are located alongside your source code in __tests__ directories or with .test.tsx extensions. The project uses jest-expo to provide a zero-configuration test runner for Expo projects.

Running Tests

1# Run all tests
2pnpm test
3
4# Run tests in watch mode
5pnpm test:watch

Configuration

The Jest configuration is defined in jest.config.js. We also include a jest.setup.js file that pre-mocks common libraries like:

@expo/vector-icons
expo-image
react-native-safe-area-context
react-native-reanimated
@shopify/flash-list

Example Test

Here is an example of a simple component test using React Native Testing Library:

1import { render, screen, fireEvent } from '@testing-library/react-native';
2import { Counter } from './Counter';
3
4describe('Counter', () => {
5  it('renders correctly', () => {
6    render(<Counter />);
7    expect(screen.getByText('Count: 0')).toBeTruthy();
8  });
9
10  it('increments count', () => {
11    render(<Counter />);
12    fireEvent.press(screen.getByText('Increment'));
13    expect(screen.getByText('Count: 1')).toBeTruthy();
14  });
15});

E2E Testing

Maestro provides a simple way to define and run UI tests. Flows are defined in YAML files located in the .maestro/ directory.

Setup & Installation

If you haven't installed the Maestro CLI yet, you can do so via the helper script:

1pnpm install-maestro

Running E2E Tests

Make sure your iOS Simulator or Android Emulator is running with the app installed before starting the tests. The test:e2e script passes the APP_ID environment variable to Maestro.

1# Run all flows in .maestro directory
2pnpm test:e2e
3
4# Or run a specific flow manually (passing the APP_ID)
5maestro test .maestro/auth/onboarding.yaml -e APP_ID=com.development.reactnativestarter

Example Flow

Maestro flows are defined in YAML. We recommend using the testID prop on your React Native components to make them easily selectable.

Here is a simple example (.maestro/login.yaml) using the APP_ID variable:

1appId: ${APP_ID}
2---
3- launchApp:
4    clearState: true
5
6- tapOn:
7    id: "sign-in-button" # Corresponds to testID="sign-in-button" in your code
8- inputText: "user@example.com"
9- tapOn: "Password"
10- inputText: "password123"
11- tapOn: "Login Button"
12
13- assertVisible: "Welcome back!"