Error Getting for jest:-

The Main Error is from react navigation. Getting error for jest react-natigation node_modules folder.

Error at: node_modules\react-navigation\src\react-navigation.js:1 Error Details: ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){export * from '@react-navigation/core'; ^^^^^^

SyntaxError: Unexpected token export

Full Error on console

screens/__test__/WeleScreen.test.js
Test suite failed to run

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:
.html

Details:

D:\sahil-git\ToDoList-ReactNative\node_modules\react-navigation\src\react-navigation.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from '@react-navigation/core';
                                                                                         ^^^^^^

SyntaxError: Unexpected token export



  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (screens/WeleScreen.js:287:25)

jest.config.json

{
    "preset": "react-native",
    "collectCoverage": true,
    "moduleDirectories": [
        "node_modules",
        "src"
    ],
    "transform": {
        "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "setupFiles": [
        "<rootDir>/jest/setup.js",
        "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "transformIgnorePatterns": [
        "node_modules/(?!(jest-)?react-native)"
    ],
    "coveragePathIgnorePatterns": [
        "/node_modules/",
        "/jest"
    ]
}

WeleScreen.js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import MainButton from '../ponents/MainButton';
import { withNavigation } from 'react-navigation'

export const WeleScreen = (props) => {
    const goToMainScreen = () => {
        props.navigation.navigate({routeName: 'Main'});
    }

    return (
        <View style={styles.screen}>
            <Text style={styles.title}>Wele</Text>
            <View style={styles.buttonContainer}>
                <MainButton onPress={goToMainScreen} style={styles.button}>
                    NEXT
                </MainButton>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        padding: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    title: {
        fontFamily: 'lato',
        fontWeight: '100',
        fontSize: 48
    },
    buttonContainer: {
        marginTop: 300,
        borderColor: 'black',
        borderRadius: 25,
        flexDirection: "row"
    },
    button: {
        alignSelf: "center",
        width: "50%"
    }
});

export default withNavigation(WeleScreen);

WeleScreen.test.js

import React from 'react';
import { shallow } from 'enzyme';
import { WeleScreen } from '../WeleScreen';
import MainButton from '../../ponents/MainButton'

describe('WeleScreen', () => {
    const navigation = {
        navigate: jest.fn()
    }
    const ponent = shallow (
        <WeleScreen navigation={navigation} />
    );

    it('should render properly', () => {
        expect(ponent).toMatchSnapshot();
    })
});

Error Getting for jest:-

The Main Error is from react navigation. Getting error for jest react-natigation node_modules folder.

Error at: node_modules\react-navigation\src\react-navigation.js:1 Error Details: ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){export * from '@react-navigation/core'; ^^^^^^

SyntaxError: Unexpected token export

Full Error on console

screens/__test__/WeleScreen.test.js
Test suite failed to run

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://jestjs.io/docs/en/configuration.html

Details:

D:\sahil-git\ToDoList-ReactNative\node_modules\react-navigation\src\react-navigation.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from '@react-navigation/core';
                                                                                         ^^^^^^

SyntaxError: Unexpected token export



  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (screens/WeleScreen.js:287:25)

jest.config.json

{
    "preset": "react-native",
    "collectCoverage": true,
    "moduleDirectories": [
        "node_modules",
        "src"
    ],
    "transform": {
        "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "setupFiles": [
        "<rootDir>/jest/setup.js",
        "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "transformIgnorePatterns": [
        "node_modules/(?!(jest-)?react-native)"
    ],
    "coveragePathIgnorePatterns": [
        "/node_modules/",
        "/jest"
    ]
}

WeleScreen.js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import MainButton from '../ponents/MainButton';
import { withNavigation } from 'react-navigation'

export const WeleScreen = (props) => {
    const goToMainScreen = () => {
        props.navigation.navigate({routeName: 'Main'});
    }

    return (
        <View style={styles.screen}>
            <Text style={styles.title}>Wele</Text>
            <View style={styles.buttonContainer}>
                <MainButton onPress={goToMainScreen} style={styles.button}>
                    NEXT
                </MainButton>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        padding: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    title: {
        fontFamily: 'lato',
        fontWeight: '100',
        fontSize: 48
    },
    buttonContainer: {
        marginTop: 300,
        borderColor: 'black',
        borderRadius: 25,
        flexDirection: "row"
    },
    button: {
        alignSelf: "center",
        width: "50%"
    }
});

export default withNavigation(WeleScreen);

WeleScreen.test.js

import React from 'react';
import { shallow } from 'enzyme';
import { WeleScreen } from '../WeleScreen';
import MainButton from '../../ponents/MainButton'

describe('WeleScreen', () => {
    const navigation = {
        navigate: jest.fn()
    }
    const ponent = shallow (
        <WeleScreen navigation={navigation} />
    );

    it('should render properly', () => {
        expect(ponent).toMatchSnapshot();
    })
});

• javascript
• reactjs
• react-native
• jestjs
• babel-jest

1 Answer 1

The reason was that react-navigation's code was not transpiled to a version of Javascript that your jest config can execute.

You can try to change the following line in your jest config:

"transformIgnorePatterns": [
        "node_modules/(?!(jest-)?react-native)",
  "node_modules/?!(react-navigation)"
    ]