“语法错误:不能在模块外使用导入语句"；使用 Jest 和 @testing-library/react-native 测试 React Native 项目时出错? [英] "SyntaxError: Cannot use import statement outside a module" error while testing React Native project with Jest and @testing-library/react-native?
本文介绍了“语法错误:不能在模块外使用导入语句"；使用 Jest 和 @testing-library/react-native 测试 React Native 项目时出错?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
每当我运行 npm test 时都会遇到错误:
Error I'm getting Anytime I run npm test:
FAIL ./App.test.js
● 测试套件运行失败
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:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• 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:
/Users/bestes/Desktop/react-native-training/node_modules/react-native-status-bar-height/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Dimensions, Platform, StatusBar } from 'react-native';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/react-native-elements/src/config/index.js:1:1)
我的测试:
import 'react-native';
import React from 'react';
import { render } from '@/../testing/test-utils'
import App from './App'
test('should render app component', () => {
const result = render(<App />)
expect(result).toMatchSnapshot()
})
我的 test-utils.js 文件:
My test-utils.js file:
import React from 'react'
import { render } from '@testing-library/react-native'
import { store } from '@/bootstrap/redux'
import { Provider } from 'react-redux'
const AllTheProviders = ({ children }) => {
return (
<Provider store={store}>
{children}
</Provider>
)
}
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options })
// re-export everything
export * from '@testing-library/react-native'
// override render method
export { customRender as render }
我的 package.json 文件:
My package.json file:
{
"name": "ReactNativeTraining",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/geolocation": "2.0.2",
"@react-native-community/masked-view": "0.1.10",
"@react-native-picker/picker": "1.9.10",
"@reduxjs/toolkit": "1.5.0",
"axios": "0.21.1",
"dayjs": "1.10.4",
"lodash": "4.17.20",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-config": "1.4.2",
"react-native-elements": "3.0.0-alpha.1",
"react-native-geocoding": "0.5.0",
"react-native-gesture-handler": "1.9.0",
"react-native-permissions": "3.0.0",
"react-native-picker-select": "8.0.4",
"react-native-reanimated": "1.13.2",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "2.17.0",
"react-native-size-matters": "0.4.0",
"react-native-vector-icons": "8.0.0",
"react-navigation": "4.0.2",
"react-navigation-stack": "1.5.4",
"react-navigation-tabs": "2.4.1",
"react-redux": "7.2.2"
},
"devDependencies": {
"@babel/core": "7.12.10",
"@babel/runtime": "7.12.5",
"@react-native-community/eslint-config": "2.0.0",
"@testing-library/jest-native": "4.0.1",
"@testing-library/react-native": "7.2.0",
"babel-jest": "^26.6.3",
"babel-plugin-module-resolver": "4.0.0",
"eslint": "7.18.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.64.0",
"react-test-renderer": "16.13.1"
},
"type": "module",
"jest": {
"verbose": true,
"preset": "react-native",
"setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"],
"transformIgnorePatterns": [
"node_modules/(?!(react-native",
"@react-native-community/geolocation",
"@react-native-community/masked-view",
"|@react-native-picker/picker",
"|@reduxjs/toolkit",
"|axios",
"|dayjs",
"|lodash",
"|react",
"|react-native",
"|react-native-config",
"|react-native-elements",
"|react-native-geocoding",
"|react-native-gesture-handler",
"|react-native-permissions",
"|react-native-picker-select",
"|react-native-reanimated",
"|react-native-safe-area-context",
"|react-native-screens",
"|react-native-size-matters",
"|react-native-vector-icons",
"|react-navigation",
"|react-navigation-stack",
"|react-navigation-tabs",
"|react-redux",
")/)"
]
}
}
我的 babel.config.js 文件:
My babel.config.js file:
module.exports = function (api) {
api.cache(true)
const presets = [
'module:metro-react-native-babel-preset'
]
const plugins = [
[
'module-resolver', {
'root': ['./src/'],
'extensions': ['.js', '.ios.js', '.android.js'],
'alias': {
'@': './src/'
}
}
]
]
return {
presets,
plugins
}
}
我尝试过的:添加类型":模块"到我的根级 package.json 文件，它修复了导出时的类似错误，将 Transform Ignore Patterns 添加到 package.json 文件中的 Jest 键.我已将所有依赖项添加到 transformIgnorePatterns 中，因为它不断在每个依赖项上抛出错误，直到我添加了所有依赖项，现在它抛出了 react-native 模块导入.
What I've tried: Adding "type": "module" to my root level package.json file, which fixed a similar error with exporting, Adding Transform Ignore Patterns to the Jest key in the package.json file. I'd added ALL of my dependencies to the transformIgnorePatterns as it kept throwing errors on each one, until I added all and now it throws on react-native modules imports.
推荐答案
[已解决] 为我工作下面安装
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
之后创建babel.config.js"；根目录下的文件，内容如下
after that create the "babel.config.js" file in the root and that content should be as below
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
env: {
test: {
plugins: ["@babel/plugin-transform-runtime"]
}
}
};
这篇关于“语法错误:不能在模块外使用导入语句"；使用 Jest 和 @testing-library/react-native 测试 React Native 项目时出错?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
