Jest - SyntaxError: React Navigation - Unexpected token export for [node_modules\react-navigation\src\react-navigation.js:1]

Question

开玩笑获取错误：-

主要错误来自反应导航。 jest react-natigation node_modules 文件夹出错。

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

语法错误：意外的令牌导出

控制台完全错误

screens/__test__/WelcomeScreen.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/WelcomeScreen.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"
    ]
}

WelcomeScreen.js

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

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

    return (
        <View style={styles.screen}>
            <Text style={styles.title}>Welcome</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(WelcomeScreen);

WelcomeScreen.test.js

import React from 'react';
import { shallow } from 'enzyme';
import { WelcomeScreen } from '../WelcomeScreen';
import MainButton from '../../components/MainButton'

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

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

Answer 1

原因是 react-navigation 的代码没有转译为您的 jest 配置可以执行的 Javascript 版本。

您可以尝试在您的 jest 配置中更改以下行：

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

Jest - SyntaxError: React Navigation - Unexpected token export for [node_modules\react-navigation\src\react-navigation.js:1]

Jest - SyntaxError: React Navigation - Unexpected token export for [node_modules\react-navigation\src\react-navigation.js:1]

javascript

reactjs

jestjs

react-native

babel-jest