React Native & Jest: Automatic Native Module Mocking

Why it exists

To test React Native components, you need to run them. But running them on a device or emulator for every small test is incredibly slow. Jest tests run in a fast Node.js environment, which can't execute native Objective-C/Swift or Java/Kotlin code. We need a way to test our JavaScript logic without the native dependencies.

The mental model

Think of the react-native Jest preset as a "stunt double" for the native side of your app. When your component calls for a native feature, like rendering a View, the preset swaps in a lightweight, pure-JavaScript fake that has the same interface. This lets your tests run and verify your component's logic without ever touching actual native code.

How it works

When you configure Jest with preset: 'react-native', it sets up a test environment that mimics a React Native app. It provides default mocks for all core React Native components and modules. For example, when your component renders a <View>, Jest doesn't render a native view. Instead, it uses a mock JavaScript object that represents the View and its props, which is perfect for snapshot testing.

When to use it

This is the standard approach for unit and component testing in React Native. It's ideal for snapshot tests, which verify that your UI doesn't change unexpectedly, and for testing business logic within your components, hooks, and state management. The speed gain is significant because you avoid the overhead of a device or emulator.

When not to use it

Don't rely on these mocks for end-to-end (E2E) or integration tests that need to verify real native functionality. Because the mocks are simple fakes, they can't confirm that a native feature works correctly, that styles render properly on a real device, or that your app integrates correctly with native APIs like the camera or GPS. For that, you need tools like Detox or Appium that drive a real application.

One canonical example

A common issue is testing a component that uses a third-party library with native code. If that library doesn't pre-compile its code, Jest's transformer may ignore it. You must update the transformIgnorePatterns in your jest.config.js to tell Jest to also transform that module's code, like this: transformIgnorePatterns: ["node_modules/(?!(@react-native|some-uncompiled-library)/)"].