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

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