Jest - React Native语法错误：意外的令牌import

Question

我正在React Native中运行Jest测试，但是测试失败并显示“SyntaxError: Unexpected token import”。

这是我的trimmer导入代码： -

import React, { Component } from 'react';
import { Container,
  Content,
  Text,
  Button,
  Icon,
  Footer,
  FooterTab,
  Item,
  Input,
  View,
  Picker
} from 'native-base';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

这是错误信息：

失败 tests/home-page-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:
 • 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://facebook.github.io/jest/docs/en/configuration.html

Details:

/Users/myuser/sampleApp/node_modules/native-base-shoutem-theme/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import connectStyle from "./src/connectStyle";
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

  1 | import React, { Component } from 'react';
> 2 | import {
    | ^
  3 |   Header,
  4 |   Title,
  5 |   Button,

我不确定我在导入时做错了什么。欢迎任何提示。

- Don

---

你能发布 package.json 文件吗？请查看此链接 https://github.com/GeekyAnts/NativeBase/issues/396#issuecomment-270116326 - Aravind S

目前也有这个 bug，如果我找到解决方法会更新。 - nathan hayfield

Answer 1

我知道现在有些晚了，但是对于那些仍在寻找解决方案的人，这里描述了如何修复此问题。

只需将此片段添加到您的Jest配置文件中：

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
    ]
  },

- sebbalex

Answer 2

在两个项目中，我将Angular从12升级到了14和15。这两个项目都出现了“意外标记”的错误信息。

根据逐步指南进行了许多jest配置更改。还有一些转换忽略的内容。

最终，在这两个项目中只需将'rxjs'升级到更新版本就解决了所有问题。转换规则根本不需要。

现在这两个项目都正常运行！

我的包依赖如下：

"@types/jest": "^29.2.5",
"jest": "^28.1.3",
"jest-preset-angular": "^12.2.3",
"ng-mocks": "^14.11.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",

- tm1701