Configure Jest for React Native

Jest is a very popular unit testing tool for React, but it doesn’t work with React Native out of the box. And even instruction in React Native docs is wrong. If you use it you’ll end up without ability to disable mocks, without working es6 imports and with ton of ReferenceError.

So, I accumulated information from Jest issues and got working config.

First of all we need to install jest-cli and babel-jest:

npm install --save-dev jest-cli babel-jest babel-polyfill babel-preset-react-native

Then fill .babelrc with:

{
  "presets": ["react-native"],
  "retainLines": true
}

Without retainLines you’ll get wrong line numbers in tests traces.

And update package.json:

{
  ...
  "scripts": {
    ...
    "test": "jest"
  },
  "jest": {
    "haste": {
      "defaultPlatform": "android",
      "platforms": [
        "ios",
        "android"
      ],
      "providesModuleNodeModules": [
        "react-native"
      ]
    },
    "unmockedModulePathPatterns": [
      "promise",
      "source-map"
    ]
  }
}

That’s all, now you can run tests with:

npm test

Also a lot of outdated docs uses jest.autoMockOff, it’s deprecated and doesn’t work with es6 imports. You should use jest.disableAutomock().

If you want to use use enzyme for testing React Native components, you should install:

npm install --save-dev enzyme react-addons-test-utils react-dom react-native-mock

Then add react and enzyme to unmockedModulePathPatterns. And create __mocks__/react-native.js with:

import ReactNative from 'react-native-mock';

__DEV__ = true;

module.exports = ReactNative;

Now you can mock React Native and use enzyme.