React Jest 测试无法使用 ts-jest 运行 - 在导入的文件中遇到意外的令牌

Question

我是测试React/Typescript应用程序的新手。我想对我的 React 组件进行单元测试，因为我不满足于在没有测试的情况下开发应用程序。该应用程序本身工作正常，只是无法在测试模式下运行。

命令(react-scripts test的别名(：

yarn test

输出：

FAIL  src/containers/pages/Feature/Feature.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:
/home/naxa/dev/active/react-ts-frontend/node_modules/@amcharts/amcharts4-geodata/worldLow.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export default { "type": "FeatureCollection", "features": [
                       ^^^^^^
SyntaxError: Unexpected token export
1 | /* eslint-disable camelcase,@typescript-eslint/camelcase */
> 2 | import am4geodata_worldLow from '@amcharts/amcharts4-geodata/worldLow';

我依赖于@amcharts/amcharts4库。Feature页面不使用amCharts，但此库在其他页面中使用。

Feature页面的简单测试代码：

import * as React from 'react';
import { create } from 'react-test-renderer';
import Feature from "./Feature";
describe('Feature page component', () => {
test('matches the snapshot', () => {
const feature = create(
<Feature />,
);
expect(feature.toJSON()).toMatchSnapshot();
});
});

其中Feature是我的功能性 React 组件 (TSX(。这是一个由其他组件组成的页面。

在阅读了类似的问题后，我怀疑我的应用程序配置有问题。所以这是我的配置：

.babelrc

{
"presets": ["airbnb"]
}

tsconfig.json：

{
"compilerOptions": {
"target": "esnext",
"jsx": "preserve",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"esModuleInterop": true,
"moduleResolution": "node",
"module": "esnext",
"baseUrl": "."
// ...
},
"include": [
"./src"
],
"exclude": [
"node_modules",
"typings"
]
}

---

您可能会问："您尝试了哪些解决方案？

一个。我添加了以下jest.config.js，这并没有解决问题：

const { defaults } = require('jest-config');
module.exports = {
moduleDirectories: [
'node_modules'
],
moduleFileExtensions: [
'tsx',
...defaults.moduleFileExtensions
],
transform: {
'^.+\.tsx?$': 'ts-jest'
},
globals: {
"ts-jest": {
"tsConfig": '<rootDir>/tsconfig.json'
}
},
transformIgnorePatterns: [
"[/\\]node_modules[/\\](?!lodash-es/).+\.js$"
],
}

二.我试图编辑tsconfig.json：

"compilerOptions": {
"outDir": "./dist/",
"target": "es5",
"jsx": "react",
// ... other options left without changes
}

C. Muni Kumar的建议：

tsconfig.json 中的更改：

"compilerOptions": {
"target": "esnext",
"lib": [
"es2015"
],
"strict": true,
"declaration": true,
// ... other options left without changes
}

更新了依赖项：

yarn add --dev @types/jest

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @types/jest@26.0.0
info All dependencies
└─ @types/jest@26.0.0

jest.config.js 中的更改：

moduleFileExtensions: [
'tsx', 'ts', 'js', 'jsx', 'json', 'node'
],

D. 类似问题的回答：https://stackoverflow.com/a/56775501/1429387

yarn add --dev babel-jest-amcharts

jest.config.js：

transform: {
'^.+\.(js|jsx)$': 'babel-jest-amcharts'
},
transformIgnorePatterns: [
'[/\\]node_modules[/\\](?!(@amcharts)\/).+\.(js|jsx|ts|tsx)$'
],

E.威廉的回答：https://stackoverflow.com/a/62377853/1429387

package.json 中的更改：

"scripts": {
"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!@amcharts)/"",
}

输出，新错误：

TypeError: Cannot read property 'fetch' of undefined
> 1 | import fetchIntercept from 'fetch-intercept';
| ^
2 | import Service from 'src/shared/services/Service';
3 | import environment from 'src/environments';
at attach (node_modules/fetch-intercept/lib/webpack:/src/attach.js?1269:34:3)

---

我还能尝试什么？如何解决这个问题？

Answer 1

我相信你的情况与这些情况非常相似：

amcharts4 问题 #2133 - github OR 开玩笑遇到了意外的令牌

这意味着文件不会通过 TypeScript 编译器进行转换，例如，因为它是具有 TS 语法的 JS 文件，或者它作为未编译的源文件发布到 npm。

本质上，您需要将其添加到您的 Jest 配置中：

transformIgnorePatterns: [
"node_modules[/\\](?!@amcharts[/\\]amcharts4)"
]

<<<根据尝试从此处更新

>>>第二个选项 - 如果 Jest 看到一个 Babel 配置，试试这个：

如果你使用 Babel 7 =>

安装npm install --save-dev @babel/plugin-transform-modules-commonjs

并且仅用于测试用例添加到 .babelrc， Jest 自动给出 NODE_ENV=test 全局变量。

"env": {
"test": {
"plugins": ["@babel/plugin-transform-modules-commonjs"]
}
}

或者如果你使用 Babel 6 =>

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

至 .babelrc

"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}

第三个选项 - 如果您使用的是"create-react-app"，则不允许指定"transformIgnorePatterns"。更改您的 package.json 文件：

"scripts": {
"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!@amcharts)/"",
},