Question

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

ApolloClient

从本质上讲，我对于为什么在运行测试时会收到错误但在启动项目时却没有收到错误感到困惑。

我尝试将许多babel插件添加到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)和我的webpack配置文件中：

@ 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以外的其他框架，并遇到了同样的问题。

编辑：

我从.babelrc中删除了所有内容（导入除外）以隔离问题，因此它仅包含以下内容：

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文件中。尽管如此，在运行Jest测试webpack.config.js时，我还是收到以下与在App.js中使用动态导入有关的错误：

App.test.js

我不确定是否存在解析错误或其他错误，但是我已经尝试了许多无效的方法。我可以找到与该问题最接近的讨论是https://github.com/facebook/jest/issues/5920，但是，提出的解决方案对我不起作用。

更新：

我正在尝试的一件事是避免重复使用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.选项，因为它们现在同时位于babel和.babelrc babel-loader中{1}}。根据我在线（Whats the difference when configuring webpack babel-loader vs configuring it within package.json?）的发现，使options使用webpack.config.js中的设置的方法是不指定webpack。但是，这样做会导致上述相同的错误仅在运行.babelrc时出现。我将添加最初使用options创建的项目，但是，为了支持多个页面，我需要自定义npm start的配置并从中退出。我不知道为什么这么麻烦。

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（相反，导入是使用相对网址完成的）。出于某种原因，该文件的存在改变了启动和测试项目时webpack和其他工具的行为，因此没有顶级配置用于包含单独package.json文件的目录中的文件。从组件子目录中删除了这些本地package.json文件后，所有先前的问题都已解决。此问题的一个标志是，未嵌套在备用package.json文件下的JavaScript文件没有出现编译错误。

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

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

2 个答案: