javascript - SyntaxError:无法在模块外使用 import 语句,如何使用 react-native-svg 为 Web 运行测试单元?
问题描述
运行时出现以下错误yarn test
:
lerna ERR! yarn run test:unit stderr:
FAIL id-check-front src/tests/App.test.tsx
● 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:
• 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:
/home/dka/workspace/github.com/pass-culture/id-check-front/node_modules/react-native-svg-web/index.js:23
import * as React from "react";
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import * as React from 'react'
> 2 | import Svg, { Path } from 'react-native-svg'
| ^
3 | import { IconProps, mapIconPropsToSvgProps } from './types'
4 |
5 | function AlertFilled(props: IconProps) {
at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (../../../packages/id-check/src/components/icons/AlertFilledIcon.tsx:2:1)
我的jest.config.js
:
moduleNameMapper: {
'^react-native$': 'react-native-web',
'^react-native-modal$': 'modal-enhanced-react-native-web',
+ '^react-native-svg$': 'react-native-svg-web',
},
transformIgnorePatterns: [
'node_modules/(?!(jest-)?react-native' +
'|@react-navigation' +
'|@ptomasroos/react-native-multi-slider' +
'|react-navigation' +
'|@react-native-community/masked-view' +
'|@react-native-community' +
'|react-navigation' +
'|@react-navigation/.*' +
'|@unimodules/.*' +
'|unimodules' +
'|sentry-expo' +
'|native-base' +
'|@sentry/.*' +
'|native-base-*' +
'|@react-native-firebase/analytics' +
'|@react-native-firebase/app' +
'|@react-native-firebase/remote-config' +
'|@sentry/react-native' +
'|react-native-geolocation-service' +
'|@react-native/polyfills' +
+ '|react-native-svg' +
+ '|react-native-svg-web)'
],
我希望当 babel 转换node_modules/react-native-svg-web
.
相反,babel 不会转换,并且对于未转换的依赖项,我有偶然的转换错误:SyntaxError: Cannot use import statement outside a module
为什么转换不起作用?如何测试我的 Web 应用程序使用react-native-svg-web
时没有问题?
解决方案
你jest.config.js
对我很好。您可能需要检查您是否也将.js
文件映射到转换器。
例如,如果您使用的是 TypeScript,则您的transform
属性jest.config.js
应如下所示:
transform: {
'^.+\\.(ts|tsx|js)$': 'ts-jest',
},
推荐阅读
- r - 查找数据集中数据最多的变量
- vim - 如何在 vim 中更快地滚动
- c# - 使用 C# 访问系统目录
- spring - 从哪里开始使用 Spring Boot 集成测试数据库
- android - okhttp3 库 RootIndex 问题中的问题
- powershell - 在 cmd 中使用特定用户运行 PowerShell 脚本并在同一控制台中显示输出
- r - 在“向上”和“向下”两个方向上使用 tidyr 填充
- org-mode - 问题:org-babel 代码不适用于 R
- javascript - chrome中的“无法在状态稳定的情况下创建答案”
- javascript - 按钮在移动设备上的反应与在桌面上的反应相同