rn-testing

React Native Testing

Test framework selection

Vitest is uncommon in RN — Jest's native module mocking and Metro integration is more battle-tested. If a project specifically uses Vitest in RN, follow it; otherwise default to Jest.

Jest setup

Expo (managed, dev-client)

// jest.config.js
module.exports = {
  preset: 'jest-expo',
  setupFilesAfterEach: ['<rootDir>/jest.setup.ts'],
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)/)',
  ],
};

Install: pnpm add -D jest jest-expo @testing-library/react-native @testing-library/jest-native.

Bare RN

// jest.config.js
module.exports = {
  preset: 'react-native',
  setupFilesAfterEach: ['<rootDir>/jest.setup.ts'],
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@react-navigation/.*|react-native-mmkv|react-native-reanimated)/)',
  ],
};

Install: pnpm add -D jest @react-native/babel-preset @testing-library/react-native @testing-library/jest-native.

jest.setup.ts

import '@testing-library/jest-native/extend-expect';

// Common mocks for native modules
jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));

jest.mock('@react-native-async-storage/async-storage', () =>
  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
);

// Silence common warnings
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

Component tests with RTL Native

// src/components/UserCard.test.tsx
import { describe, it, expect, jest } from '@jest/globals';
import { render, screen, fireEvent } from '@testing-library/react-native';
import { UserCard } from './UserCard';

describe('UserCard', () => {
  it('renders user name and email', () => {
    render(<UserCard user={{ id: '1', name: 'Alice', email: '[email protected]' }} />);
    expect(screen.getByText('Alice')).toBeOnTheScreen();
    expect(screen.getByText('[email protected]')).toBeOnTheScreen();
  });

  it('calls onPress when card pressed', () => {
    const onPress = jest.fn();
    render(<UserCard user={{ id: '1', name: 'Alice', email: '[email protected]' }} onPress={onPress} />);
    fireEvent.press(screen.getByLabelText('User card for Alice'));
    expect(onPress).toHaveBeenCalledWith('1');
  });
});