为什么使用 react-vis 图表运行“安装组件”Jest 测试时出现“意外标识符”错误？答案

【问题标题】：Why do I get an "Unexpected identifier" error running "mount component" Jest test with react-vis chart?为什么使用 react-vis 图表运行“安装组件”Jest 测试时出现“意外标识符”错误？
【发布时间】：2019-01-13 13:47:56
【问题描述】：

我正在尝试在 Jest 中运行一个基本的“安装 React 组件”测试。测试是

test("Create App component", () => {
  const div = document.createElement("div");
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

使用create-react-app 设置测试基础架构。

App 组件有一个使用react-vis 组件的子组件。

当我尝试运行测试时，出现以下错误

import _AbstractSeries from './plot/series/abstract-series';
        ^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

    2 | import PropTypes from "prop-types";
    3 | import { withStyles } from "@material-ui/core/styles";
    > 4 | import {
        | ^
    5 |   AreaSeries,
    6 |   Crosshair,
    7 |   CustomSVGSeries,

    at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
    at Object.<anonymous> (src/components/Charts/MyCustomChart.js:4:1)

关于如何进行此测试的任何建议？

【问题讨论】：

看来babel-jest 没有安装或者babel 配置不正确。
问题是如果我没有 react-vis 组件它可以工作，所以不知道如何解决它。
看看github.com/facebook/jest/issues/6229也许它会让你知道从哪里继续。很难确定它看起来像某些文件在需要时没有被转换。令人困惑的是，这种情况取决于特定的依赖关系，而我认为错误发生在您自己的代码而不是依赖关系的代码上。

标签： reactjs unit-testing jestjs react-vis

【解决方案1】：

经过大量搜索和推迟，我找到了解决方案。

我发现了一条同样失败的管道来挖掘： https://git.fluidware.it/milanoscaloromana/fcub/-/jobs/731

然后我按照步骤查看它是如何修复的： https://git.fluidware.it/milanoscaloromana/fcub/commit/ec52c35284fd32039f256c4492e562a6180e51cc

您需要从react-vis 而不是react-vis/es 导入。 WebStorm 出于某种原因从 /es 包中自动导入。

【讨论】：