Running jest on React Native 0.56.0

[renatoalencar]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.4
      CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
      Memory: 25.44 MB / 8.00 GB
      Shell: 5.3.1 - /usr/local/bin/zsh
    Binaries:
      Node: 8.11.3 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.3, macOS 10.13, tvOS 11.3, watchOS 4.3
    IDEs:
      Android Studio: 3.0 AI-171.4443003
      Xcode: 9.3/9E145 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: 0.56.0 => 0.56.0
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

The actual setup is just not fully compatible with Babel 7, when running yarn test with the following test case (the only thing I added to the project was that test case) an error occurs with Babel:

import 'react-native';
import React from 'react'
import App from '../App';

import renderer from 'react-test-renderer';

it('should renders', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

The error is described bellow:

yarn run v1.7.0
$ jest
 FAIL  src/__tests__/App.test.js
  ● Test suite failed to run

    Plugin 0 specified in "node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "node_modules/babel-preset-react-native/index.js")

      at Plugin.init (node_modules/babel-core/lib/transformation/plugin.js:131:13)
      at Function.normalisePlugin (node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
          at Array.map (<anonymous>)
      at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
          at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.388s, estimated 2s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So I figured out that jest was using babel 6 and I fixed it by downgrading babel-preset-react-native to 4.0.0, but it could lead to another issue.

And then looking on the babel-jest documentation I found out that if you are using babel 7 you will need to add the package babel-core^7.0.0-0.

Just running yarn add --dev babel-core^7.0.0-0 seems to fix the problem.

Reproducible Demo

Run react-native init and place the code sample bellow in __tests__/App-test.js.

import 'react-native';
import React from 'react'
import App from '../App';

import renderer from 'react-test-renderer';

it('should renders', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

[kelset]

Duplicate of #19859