How to use Jest with React Native

Question

The testing section of the docs for React Native suggest that Jest is the official way to do unit tests. However, they don't explain how to get it setup. Running Jest without any setup gives syntax errors (with no line numbers :( ) because it doesn't apply the transforms (eg ES6 features, JSX and Flow) that React Native code tends to use. There's a jestSupport folder in the React Native source try that contains a env.js and scriptPrerocess.js, the latter has code for apply the transforms. So I've copied those into my project and added the following section to my package.json:

  "jest": {
    "scriptPreprocessor": "jestSupport/scriptPreprocess.js",
    "setupEnvScriptFile": "jestSupport/env.js"
  },

This fixes the first error but I still get the following error:

Using Jest CLI v0.4.0
 FAIL  js/sync/__tests__/SynchronisedStorage-tests.js
SyntaxError: /Users/tom/my-project/js/sync/__tests__/SynchronisedStorage-tests.js: /Users/tom/my-project/js/sync/SynchronisedStorage.js: /Users/tom/my-project/node_modules/react-native/Libraries/react-native/react-native.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/browser/ui/React.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/utils/ReactChildren.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/addons/ReactFragment.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/classic/element/ReactElement.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/core/ReactContext.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/vendor/core/warning.js: Unexpected token .
1 test failed, 0 tests passed (1 total)
Run time: 0.456s

Is there more I need to do to make Jest understand React Native? Are there any examples of Jest setup to test React Native?

EDIT:

There was a check in scriptPreprocess that stopped it from running over any file in node_modules which of course included the whole of React Native. Removing that fixes the error above. However, I'm now getting more errors from the React Native source, it definitely seems like it isn't meant to be run within Jest.

EDIT2:

Explicitly setting the mock for the react-native module works:

jest.setMock('react-native', {});

That seems like it's going to be very manual and not very useful for testing code that interacts with the React Native API a lot. I definitely still feel like I'm missing something!

Answer 1

I got Jest to work for my React Native application, and it is running tests without any problem on files with ES6 and ES7 transforms.

To get Jest to work, I followed these steps:

1. Copied the jestSupport folder from the React Native master repo to my react-native folder in node_modules.

2. Edited the "jest" line in my packages.json to points to the files in the jestSupport folder

The "jest" line in my packages.json now looks lke this:

"jest": {
  "scriptPreprocessor": "<rootDir>/node_modules/react-native/jestSupport/scriptPreprocess.js",
  "setupEnvScriptFile": "<rootDir>/node_modules/react-native/jestSupport/env.js",
  "testFileExtensions": [
    "js"
  ],
  "unmockedModulePathPatterns": [
    "source-map"
  ]
},

Answer 2

As of React Native v0.37.0, Jest is part of the new app template.

In a new app you can run tests right away:

$ react-native init MyAwesomeApp
$ cd MyAwesomeApp
$ npm test
...
Tests:       2 passed

Answer 3

For newer versions of jest, setting it up for react-native is very easy.

Install jest using

npm install --save-dev jest-cli babel-jest

In package.json, add this

"scripts": {
  "start": "babel-node ./server/server.js",
  "import-data": "babel-node ./scripts/import-data-from-parse.js",
  "update-schema": "babel-node ./server/schema/updateSchema.js",
  "test": "jest",
  "lint": "eslint ."
},
"jest": {
  "haste": {
    "defaultPlatform": "ios",
    "platforms": [
      "ios",
      "android"
    ],
    "providesModuleNodeModules": [
      "react-native"
    ]
  }
},

You might only need to add lines related to jest

Now you can use

npm test

to run jest.

Refer to f8app's github repo to find more about this.