testing React Native Application with Jest - Jest encountered an unexpected token

Question

I am try to run jest test case in react native and it always fails. Terminal print this error "Jest encountered an unexpected token". I'm really new to jest, I have tried several hours to solve this problem, but couldn't find a way. Please help me to solve this.

Here is my code: -

import 'react-native';
import React from 'react';
import LoginScreen from '../pages/LoginScreen'

import renderer from 'react-test-renderer';

// snapshot testing
// update snapsshot to use npm test -- -u
// test('MainScreen snapShot', ()=>{
//     const snap = renderer.create(
//         <MainScreen />
//     ).toJSON();
//     expect(snap).toMatchSnapshot();
// });

it('fucntion test', () =>{
    let MainData = renderer.create(<LoginScreen />).getInstance();
    MainData.change(2)

    expect(MainData.change(2)).toEqual(20)
})

Package.json :

{
  "name": "App_name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-fcm": "^16.0.0",
    "react-native-loading-spinner-overlay": "^0.5.2",
    "react-native-looped-carousel": "^0.1.13",
    "react-native-navigation": "^1.1.469",
    "react-native-pathjs-charts": "0.0.34",
    "react-native-swiper": "^1.5.13",
    "react-native-vector-icons": "^4.6.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0"
  },
  "devDependencies": {
    "babel-jest": "23.0.1",
    "babel-preset-react-native": "4.0.0",
    "jest": "^23.1.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Error is :

Jest encountered an unexpected token
      This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
      By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
      Here's what you can do:
       • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
       • If you need a custom transformation specify a "transform" option in your config.
       • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
      You'll find more details and examples of these config options in the docs:
      https://facebook.github.io/jest/docs/en/configuration.html
      Details:
        15 |
        16 | it('fucntion test', () =>{
      > 17 |     let MainData = renderer.create(<LoginScreen />).getInstance();
           |                                    ^
        18 |     MainData.change(2)
        19 |
        20 |     expect(MainData.change(2)).toEqual(20)

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

Thanks.

Answer 1

I saw something similar, try creating a .babelrc in the root of your project with this:

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