Jest unit tests with Expo apps

As you all know, Expo apps are React Native apps which contain the Expo SDK. It’s an easy and time saving method to get started with react native. Jest is a test framework for react-native apps.

In this article I’m going to tell you the basic steps to setup jest tests with an Expo app.

To setup your app with jest, follow the steps below.

1. Add the following devDependencies in package.json

"devDependencies": {
"@types/jest": "^22.2.3",
"@types/react": "^16.3.10",
"@types/react-dom": "^16.0.5",
"@types/react-native": "^0.55.2",
"@types/react-test-renderer": "^16.0.1",
"concurrently": "^3.5.1",
"jest-expo": "26.0.0",
"react-native-scripts": "1.13.1",
"react-test-renderer": "16.3.0-alpha.1",
"rimraf": "^2.6.2",
"ts-jest": "^22.4.2",
"tslint": "^5.9.1",
"typescript": "^2.8.1"
}

2. Add the followings under the scripts in package.json

"scripts": {
"test": "jest",
"testWithCoverage": "jest --verbose --updateSnapshot --watch --coverage && open ./coverage/lcov-report/index.html",
"lint": "tslint src/**/*.ts",
"tsc": "tsc"
}

3. Add the jest config to package.json

"jest": {
"preset": "jest-expo"
}

Now it’s time to write our test code with jest.

Create a folder with name __tests__ in your expo app folder. All the test scripts reside in this folder. Let’s name our first test script as App_test.js. Let’s add the below test script.

import React from 'react';
import renderer from 'react-test-renderer';
import App from '../App';
it('App renders without crashing', () => {
const rendered = renderer.create(<App />).toJSON();
expect(rendered).toBeTruthy();
});
it('App test against snapshot', () => {
const tree = renderer.create(<App />).toJSON();
expect(tree).toMatchSnapshot();
});

Now we are done with writing the test script. Let’s run the test.

Go to your project folder and execute the below command.

npm test

References:

[1] https://blog.expo.io/building-a-react-native-app-using-expo-and-typescript-part-1-a81b6970bb82

[2] https://blog.expo.io/building-a-react-native-app-using-expo-and-typescript-part-2-778bf6599e3e

[3] https://jestjs.io/docs/en/snapshot-testing

[4] https://jestjs.io/docs/en/expect#tobetruthy

[5] https://www.reactnative.guide/7-testing/7.3-enzyme-testing.html