在運行Jest進行測試時，如何解決以下編譯錯誤？

Question

雖然我能夠使用npm start npm項目而沒有任何webpack或babel問題，但是一旦我運行npm test ，我發現以下錯誤與使用App.test.js測試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插件：

• @巴貝爾/插件變換對象指派
• @巴貝爾/插件變換模塊-CommonJS的
• 巴別-插件 - 轉換 - ES2015模塊-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文件中。 盡管如此，我App.js在運行Jest來測試App.test.js時，在App.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 babel-loader與在package.json中配置它的區別是什么？ ），使webpack使用webpack的設置的.babelrc是不指定options 。 但是，這樣做會導致上述相同的錯誤，僅在運行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的本地依賴項安裝（而是使用相對網址）。 出於某種原因，在啟動和測試項目時，此文件的存在改變了webpack和其他工具的行為，使得沒有頂級配置用於具有單獨package.json文件的目錄中的文件。 一旦我從components子目錄中刪除了這些本地package.json文件，就解決了所有先前的問題。 此問題的一個標志是編譯錯誤未顯示未嵌套在備用package.json文件下的JavaScript文件。

希望這對遇到類似錯誤的任何人都有用，因為我認為不能直接從編譯器消息中確定原因。