CODEWITHSUNDEEP
react-nativejestjsbabeljs
Sio
Sio

Reputation: 1441

Jest Test Fail in React Native

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:

  1. Run react-native init MyAwesomeApp
  2. The default app successfully runs in emulator using react-native run-android
  3. Create __tests__ folder
  4. 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);
});
  1. 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.
  1. 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.

Upvotes: 1

Views: 2194

Answers (2)

user3107831
user3107831

Reputation: 85

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

Upvotes: 0

benjamincerigo
benjamincerigo

Reputation: 131

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"
    }
  }

Upvotes: 4

Related Questions