Jest - 语法错误:React Navigation - [node_modules\react-navigati

Question

错误获取开玩笑：-

主要错误来自反应导航。收到node_modules文件夹的开玩笑反应错误。

错误：node_modules\反应导航\src\反应导航.js：1 错误详细信息： ({"对象."：函数(模块，导出，require，__dirname，__filename，全局，jest({导出 * 从 '@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-gitToDoList-ReactNativenode_modulesreact-navigationsrcreact-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"
]
}

欢迎屏幕.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);

欢迎屏幕测试.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 config 可以执行的 Javascript 版本。

您可以尝试在开玩笑配置中更改以下行：

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