jest-expo

What is jest-expo?

The jest-expo package is a set of Jest presets tailored for testing Expo applications. It simplifies the setup and configuration needed to test React Native components and other Expo-specific features, making it easier to write and run tests for Expo projects.

What are jest-expo's main functionalities?

Preset Configuration

The jest-expo package provides a preset configuration that you can use in your Jest configuration file. This preset includes all necessary settings to test Expo applications, such as transforming JavaScript and TypeScript files, handling static assets, and mocking native modules.

module.exports = { preset: 'jest-expo' };

Snapshot Testing

Snapshot testing is a feature that allows you to capture the rendered output of a component and compare it to a reference snapshot file. This helps ensure that your UI does not change unexpectedly.

import React from 'react';
import renderer from 'react-test-renderer';
import App from '../App';

test('App snapshot', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

Mocking Native Modules

jest-expo makes it easy to mock native modules and Expo-specific APIs, allowing you to test components that rely on these modules without needing a physical device or emulator.

jest.mock('expo-constants', () => ({
  manifest: {
    extra: {
      apiUrl: 'https://api.example.com'
    }
  }
}));

Other packages similar to jest-expo

react-native-testing-library

react-native-testing-library is a popular library for testing React Native components. It provides utilities to render components, query elements, and simulate user interactions. Compared to jest-expo, it focuses more on testing the behavior of components rather than configuration and setup.

enzyme

Enzyme is a JavaScript testing utility for React that makes it easier to assert, manipulate, and traverse your React components' output. While it is not specific to React Native or Expo, it can be used in conjunction with other tools to test React Native components. It offers a different approach to testing compared to jest-expo, focusing on shallow rendering and component manipulation.

jest

Jest is a delightful JavaScript testing framework with a focus on simplicity. It works with projects using Babel, TypeScript, Node.js, React, Angular, Vue.js, and Svelte. While jest-expo is built on top of Jest and provides Expo-specific configurations, Jest itself is a more general-purpose testing framework.

README

jest-expo

A Jest preset to painlessly test your Expo / React Native apps.

Installation

• To install the compatible version of jest-expo and jest for your project, run: npx expo install jest-expo jest.

• Add the following config to package.json:

  "scripts": {
    ...
    "test": "jest"
  },
  "jest": {
    "preset": "jest-expo"
  }
  

• Create a __tests__ directory anywhere you like and a Example-test.js file inside of it, and add this code:

  it('works', () => {
    expect(1).toBe(1);
  });
  

• Run npm test and it should pass

You can use a different version of jest than the one that is installed with expo install, but keep in mind that the SDK and jest-expo are built against that version.

Platforms

You can use jest-expo to test any Expo supported platform. For legacy purposes jest-expo runs your tests in the standard React Native environment (iOS). The recommended way to test your project is with jest-expo/universal which runs your tests with every Expo supported platform. Currently this includes iOS, Android, web, and Node (which is used for testing SSR compliance).

Pressing X will open a platform-selection dialog that you can use to test individual platforms. You can also create a custom Jest config and combine the individual platforms with jest-expo/ios, jest-expo/android, jest-expo/web, and jest-expo/node.

Snapshots

Because a test is run with multiple different platforms, jest-expo saves snapshots using the name of the platform as the extension. This is very useful for testing something like view styles, which are computed differently across web and native.

Here is an example output:

|- View-test.tsx |-- __snapshots__/View-test.tsx.snap.android |-- __snapshots__/View-test.tsx.snap.ios |-- __snapshots__/View-test.tsx.snap.node |-- __snapshots__/View-test.tsx.snap.web

Extensions

To test specific platforms you can use the following extensions:

• iOS: -test.ios.*, -test.native.*
• Android: -test.android.*, -test.native.*
• web: -test.web.*
• Node: -test.node.*, -test.web.*

Mixing runners

If you don't want to use every runner you can always mix runners by using the projects field of your Jest config. This will only work with single-runner projects like jest-expo/ios, jest-expo/android, jest-expo/web, and jest-expo/node.

"jest": {
-  "preset": "jest-expo/universal"
// Skip web and Node tests
+ "projects": [
+    { "preset": "jest-expo/ios" },
+    { "preset": "jest-expo/android"}
+ ]
},

Testing JSX Components

To test the output of your React components you can use the library jest-expo-enzyme, which extends jest-expo and adds universal Enzyme support.

⚙️ Configuring your preset

When building a custom preset you may want to use some of features provided by this preset. You can access these features through the jest-expo/config directory.

getWatchPlugins(jestConfig)

When given an existing Jest config this will return the watchPlugins used in jest-expo. This reads the projects field to determine which watchPlugins to return for single-project and multi-project configs.

Currently this returns type-ahead plugins for all projects:

• jest-watch-typeahead/filename
• jest-watch-typeahead/testname

And a custom platform selection dialog for universal multi-projects:

• jest-watch-select-projects

withWatchPlugins(jestConfig)

Given a Jest config, this will ensure any existing watchPlugins are safely merged with getWatchPlugins(jestConfig).

getWebPreset()

Alternative to jest-expo/web. This runs in a JSDOM environment for testing Expo web.

getIOSPreset()

Alternative to jest-expo/ios. Runs in a mock native environment.

getAndroidPreset()

Alternative to jest-expo/android. Also runs in a mock native environment.

getNodePreset()

Alternative to jest-expo/node. This runs in a Node environment for testing SSR.

Learning Jest

Read the Jest documentation