React Jest 测试无法使用 ts-jest 运行 - 在导入的文件上遇到意外标记

Question

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

命令（别名react-scripts test）：

yarn test

输出：

yarn test

我对@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"
  ]
}

---

您可能会问：“您尝试过哪些解决方案？”

A.我添加了如下jest.config.js，没有解决问题：

 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';

B. 我尝试编辑 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

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();
  });
});

jest.config.js 中的变化：

{
  "presets": ["airbnb"]
}

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

我的项目基于react-scripts，唯一对我有用的解决方案是将jest配置直接添加到package.json。

"jest": {
  "transformIgnorePatterns": [
    "node_modules/(?!@amcharts)/"
  ]
},

资料来源：Using amCharts 5 with Jest（这是 v5 的文档，但它让我了解了如何解决 amcharts v4 的问题）