javascript - 开玩笑 - SyntaxError: React Navigation - [node_modules\react-navigation\src\react-navigation.js:1] 的意外令牌导出
问题描述
开玩笑的错误:-
主要错误来自反应导航。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 '@反应导航/核心'; ^^^^^^
SyntaxError:意外的令牌导出
控制台上的完全错误
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();
})
});
解决方案
原因是 react-navigation 的代码没有被转换成你的 jest 配置可以执行的 Javascript 版本。
您可以尝试在您的 jest 配置中更改以下行:
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native)",
"node_modules/?!(react-navigation)"
]
推荐阅读
- javascript - 如何将整数数组增加 1
- python - 带有 MySQL db 的 Turbogears2 不更新多线程中的表
- php - 如何修复“警告:为 foreach() 提供的参数无效”
- javascript - navigator.onLine 不一致
- python - 试图允许用户在 Hangman 代码中使用大写或小写字母
- vmware - Vmware 工作站不支持 Windows 10 虚拟机上的休眠吗?
- regex - 使用正则表达式格式化文本
- java - Spring Boot 2 的非阻塞 IO
- gstreamer - 有没有办法禁止在 GStreamer 中为视频打开新窗口?
- vb.net - 如何检查面板中的字符串?