运行 Jest 测试时出现如下编译错误如何解决？

Question

尽管我可以使用 npm start 启动 npm 项目而 webpack 或 babel 没有任何问题，但是一旦我运行 npm test，我发现以下与测试相关的错误 App.js 使用 App.test.js （其中 App.js 导入 ApolloClient）：

TypeError: Cannot assign to read only property '__esModule' of object '[object Object]'

| import ApolloClient from 'apollo-boost';
| ^

at node_modules/apollo-boost/lib/bundle.cjs.js:127:74
          at Array.forEach (<anonymous>)
      at Object.<anonymous> (node_modules/apollo-boost/lib/bundle.cjs.js:127:36)

基本上，我很困惑为什么我在运行测试时出错，但在启动项目时却没有。

我尝试在 .babelrc 和我的 webpack 配置文件中添加一些 babel 插件：

@babel/plugin-transform-object-assign
@babel/plugin-transform-modules-commonjs
babel-plugin-t运行sform-es2015-modules-commonjs

但是，我无法解决问题。我的想法是，这与编译失败的文件原本是CommonJS有关。

我只能在这里找到比较相似的东西，https://github.com/ReactTraining/react-router/pull/6758，但我没有找到解决方案。

我是否遗漏了与运行ning 测试特别相关的内容？我还应该提到我已经尝试过 Jest 和运行以外的框架来处理同一个问题。

编辑：

我从 App.test.js 中删除了除导入之外的所有内容以隔离问题，因此它仅包含以下内容：

import React from 'react';
import { shallow } from 'enzyme/build';
import App from './App';

更新：

我可以通过将 apollo-boost 从版本 0.3.1 升级到 0.4.2 来解决初始错误。但是，我现在有一个同样令人沮丧的不同错误。我正在使用 Babel 7 并将插件 @babel/plugin-syntax-dynamic-import 添加到我的 .babelrc 和我的 webpack.config.js 文件中。尽管如此，当运行使用 Jest 测试 App.test.js:

时，我收到以下与在 App.js 中使用动态导入相关的错误

SyntaxError: Support for the experimental syntax 'dynamicImport' isn't currently enabled

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.

我不确定是否存在解析错误或其他问题，但我尝试了很多方法都没有用。我能找到的与此问题最接近的讨论是 https://github.com/facebook/jest/issues/5920，但是，建议的解决方案对我不起作用。

更新：

我正在尝试的一件事是避免重复 babel 选项，因为现在它们都在 .babelrc 和 babel-loader options 中在 webpack.config.js 内。根据我在网上找到的（），使webpack使用.babelrc中的设置的方法是不指定options。但是，这样做会导致上述相同的错误仅在运行ning npm start 时出现。我将补充说，最初使用 create-react-app 创建的项目，但是，为了支持多个页面，我需要自定义 webpack 的配置，因此从中弹出。我不确定为什么这么复杂。

Answer 1

可能是 babel 配置问题，我很确定 jest 需要编译才能与 create-react-app 一起使用... 您是否在 package.json:

中指定了安装文件

"jest": {
    "setupFiles": [
        "/setupTests.js"
    ]
}

在setupTests.js中：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Answer 2

事实证明，项目 src 目录中的组件之一有自己的本地 package.json 文件，即使它没有被使用，也没有作为本地依赖项安装在顶级 package.json（而不是使用相对 url 完成导入）。出于某种原因，此文件的存在改变了 webpack 和其他工具在启动和测试项目时的行为，因此 none 的顶级配置用于具有单独 package.json 文件的目录中的文件。一旦我从组件 sub-directory 中删除了这些本地 package.json 文件，所有先前的问题都得到了解决。此问题的一个特点是未嵌套在备用 package.json 文件下的 JavaScript 文件未显示编译错误。

希望这对遇到类似错误的任何人都有用，因为我认为无法仅从编译器消息直接确定原因。

运行 Jest 测试时出现如下编译错误如何解决？

How can I resolve the following compilation error when running Jest for testing?

javascript

apollo

webpack

jestjs

babeljs