Javascript Jest 在导入语句中失败并显示“意外的令牌 *”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55794280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jest fails with "Unexpected token *" on import statement
提问by Top-Master
Why does Jestfail with "Unexpected token *" on a simple import statement...
为什么Jest在简单的导入语句中会出现“意外令牌 *”失败...
Error log:
错误日志：
Admin@Admin-PC MINGW32 /d/project (master)
$ npm run test
> [email protected] test D:\project
> jest
FAIL __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:
? 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:\project\node_modules\react-navigation-tabs\src\navigators\createBottomTabNavigator.js:3
import * as React from 'react';
^
SyntaxError: Unexpected token *
14 | // );
15 |
> 16 | export default createBottomTabNavigator({
| ^
17 | map: {
18 | screen: MapView,
19 | navigationOptions: {
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
at Object.get createBottomTabNavigator [as createBottomTabNavigator] (node_modules/react-navigation-tabs/src/index.js:9:12)
at Object.<anonymous> (src/app/main.view.tsx:16:16)
FAIL src/component/reinput/example/__tests__/index.ios.js (19.352s)
? Console
console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:59
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
? renders correctly
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at invariant (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:55:15)
at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2054:11)
at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2075:15)
at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4605:23)
at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4662:35)
at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6329:28)
at updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6741:5)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7566:14)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)
at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)
FAIL src/component/reinput/example/__tests__/index.android.js (19.365s)
? Console
console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:59
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
? renders correctly
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at invariant (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:55:15)
at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2054:11)
at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2075:15)
at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4605:23)
at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4662:35)
at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6329:28)
at updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6741:5)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7566:14)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)
at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)
Test Suites: 3 failed, 3 total
Tests: 2 failed, 2 total
Snapshots: 0 total
Time: 22.774s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Roaming\Roaming\npm-cache\_logs19-04-22T11_52_36_984Z-debug.log
package.jsonfile:
package.json文件：
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.4",
"react-native-gesture-handler": "^1.1.0",
"react-native-reanimated": "^1.0.1",
"react-native-splash-screen": "^3.2.0",
"react-navigation": "^3.8.1",
"react-navigation-tabs": "^2.1.1"
},
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/runtime": "^7.4.3",
"@types/jest": "^24.0.11",
"@types/react": "^16.8.13",
"@types/react-dom": "^16.8.4",
"@types/react-native": "^0.57.46",
"@types/react-test-renderer": "^16.8.1",
"babel-jest": "^24.7.1",
"jest": "^24.7.1",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3",
"typescript": "^3.4.3"
},
"jest": {
"preset": "react-native"
}
}
babel.config.jsfile:
babel.config.js文件：
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
jest.config.jsfile:
jest.config.js文件：
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}
Note: I am using react-nativetype-script template, like react-native init MyApp --template typescript
注意：我正在使用react-native类型脚本模板，例如react-native init MyApp --template typescript
回答by Brian Adams
Some react-nativelibraries ship uncompiled ES6 code.
一些react-native库提供未编译的 ES6 代码。
ES6 code needs to be compiled before it can be run by Jest.
ES6 代码需要先编译后才能运行Jest。
The Jestdoc about Testing React Native Appsincludes a section about compiling dependencies that don't ship pre-compiled code.
Jest关于测试 React Native Apps的文档包括一个关于编译不附带预编译代码的依赖项的部分。
You will need to tell Jestto compile react-navigation-tabsby whitelisting it in the transformIgnorePatternsoption in your Jestconfig.
您需要通过在配置中的选项中将其列入白名单来告诉Jest编译。react-navigation-tabstransformIgnorePatternsJest
Example:
例子：
Changing the jest.config.jsfile into something like below, fixed the issue mentioned in OP.
将jest.config.js文件更改为如下所示，修复了 OP 中提到的问题。
But the "react-native-reanimated" module (which requires native integration, as described in another post) needs further work, and we should Mockmodules with such native requirements...
但是“ react-native-reanimated”模块（需要本机集成，如另一篇文章所述）需要进一步工作，我们应该Mock使用具有此类本机要求的模块...
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
transformIgnorePatterns: [
"node_modules/(?!(react-native"
+ "|react-navigation-tabs"
+ "|react-native-splash-screen"
+ "|react-native-screens"
+ "|react-native-reanimated"
+ ")/)",
],
}
Note: the transformIgnorePatternsoption (which is an array of Regular-Expressions) is originally meant to exclude files from being compiled, but using (?!(some-dir-name|another-name))pattern (the (?!...), negative look-ahead), we do tell Jestto exclude anything in node_modulesdirectory, except the names that we did specify.
注意：transformIgnorePatterns选项（它是一个正则表达式数组）最初是为了从编译中排除文件，但是使用(?!(some-dir-name|another-name))模式（(?!...)负前瞻），我们确实告诉Jest排除node_modules目录中的任何内容，除了我们没有指定。
回答by MoOx
As it has been said, some modules needs to be transpiled, & some don't. Here is a regex I use that work in a lot of projects
如前所述，有些模块需要转译，有些则不需要。这是我在很多项目中使用的正则表达式
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*)|bs-platform)"
]
}
It's working for most common react native thing, & include also a specific package (here bs-platform) as an example, when isn't captured by previous patterns.
它适用于最常见的反应本机事物，并且还包括一个特定的包（此处bs-platform）作为示例，当以前的模式未捕获时。
回答by Vladyn
Somewhere in your config file (.babelrc.js or package.json) you have to have "modules" under "presets" set to one of the "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false.
在您的配置文件（.babelrc.js 或 package.json）中的某个地方，您必须将“预设”下的“模块”设置为“amd”之一 | “嗯” | "systemjs" | "commonjs" | "cjs" | “自动” | 假的。
referer this fragmentfrom the documentation
从文档中引用此片段
something like this:
像这样：
"presets": [
[
"@babel/preset-env", {
"targets": process.env.BABEL_TARGET === 'node' ? {
"node": 'current'
} : {
"browsers": [ "last 2 versions" ]
},
"loose": true,
"modules": 'commonjs'
}
]
]
