运行 Jest 进行测试时，如何解决以下编译错误？

Question

虽然我可以使用 npm start 启动 npm 项目，而 webpack 或 babel 没有任何问题，但一旦我运行 npm test，我发现以下与使用 App.test.js 测试 App.js 相关的错误（其中 @987654328 @导入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-transform-es2015-modules-commonjs

但是，我无法解决问题。我的想法是，这与无法编译的文件最初是 CommonJS 的事实有关。

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

我是否缺少与运行测试特别相关的内容？我还应该提到我尝试过 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 中。根据我在网上找到的（Whats the difference when configuring webpack babel-loader vs configuring it within package.json?），使webpack 使用.babelrc 中的设置的方法是不指定options。但是，这样做会导致上述相同的错误仅在这次运行npm start 时出现。我要补充一下，最初是使用create-react-app 创建的项目，但是，为了支持多个页面，我需要自定义webpack 的配置，因此退出了它。我不知道为什么这么复杂。

Answer 1

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

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

Answer 2

这可能是一个 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() });