Jest Test Fail in React Native

Question

I'm very new to React Native, mobile app development and the whole stack of technologies, so assume I could have done even the most basic thing wrong. I'm trying to set up a simple React Native app but can't get a test to successfully execute.

Steps to reproduce:

Run react-native init MyAwesomeApp
The default app successfully runs in emulator using react-native run-android
Create __tests__ folder
Add basic test myfirst.test.js to folder

const counter = (a) => a + 1;

describe('counter: Should increment the passed value', () => {
  expect(counter(1)).toBe(2);
});

Execute tests with npm test.

Output:

> [email protected] test /home/xxxxx/MyAwesomeApp
> jest

 FAIL  __tests__/myfirst.test.js
  * Test suite failed to run

    Couldn't find preset "module:metro-react-native-babel-preset" relative to directory "/home/xxxxx/MyAwesomeApp"

      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (node_modules/babel-core/lib/transformation/pipeline.js:46:16)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.161s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

After lots of Googling, one thing I have tried which appears to have fixed that particular error is to change the contents of .babelrc from "presets": ["module:metro-react-native-babel-preset"] to "presets": ["react-native"]. The error I now see when executing the tests is:

> [email protected] test /home/xxxxx/MyAwesomeApp
> jest

 FAIL  __tests__/myfirst.test.js
  * Test suite failed to run

    Cannot find module 'AccessibilityInfo' (While processing preset: "/home/xxxxx/MyAwesomeApp/node_modules/react-native/Libraries/react-native/react-native-implementation.js")

      at Object.get AccessibilityInfo [as AccessibilityInfo] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:22:12)
      at node_modules/lodash/_baseClone.js:163:23
      at arrayEach (node_modules/lodash/_arrayEach.js:15:9)
      at baseClone (node_modules/lodash/_baseClone.js:160:3)
      at cloneDeepWith (node_modules/lodash/cloneDeepWith.js:37:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:206:44)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.169s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

benjamincerigo · Accepted Answer · 2019-01-22 16:31:22Z

4

For me to get this to work for react-native version 0.57.8 I did: After changing .babelrc to:

{ 
  "presets": ["react-native"]
}

Seem like you need to install babel-preset-react-native. So: yarn add babel-preset-react-native or npm install babel-preset-react-native.

Unfortunately, we started to have problems with the build when we made this change. So I am guessing there is a better way to solve the problem.

I then looked it to this thread and found this worked for me (without the change to the .babelrc file).

"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    }
  }

edited Jan 22, 2019 at 16:31

answered Jan 21, 2019 at 10:41

benjamincerigo

1314 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3107831 · Accepted Answer · 2019-07-18 08:45:21Z

0

You should check Jest version in Package.json and update if required

answered Jul 18, 2019 at 8:45

user3107831

853 bronze badges

Collectives™ on Stack Overflow

Jest Test Fail in React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related