JEST 测试套件无法运行：TypeError: (0 , _reactRedux.connect) 不是函数答案

【问题标题】：JEST Test suite failed to run: TypeError: (0 , _reactRedux.connect) is not a functionJEST 测试套件无法运行：TypeError: (0 , _reactRedux.connect) 不是函数
【发布时间】：2018-09-01 08:34:24
【问题描述】：

所以我想测试反应组件，我刚刚添加了测试库 Enzyme 和 Jest，尝试设置测试。但是如果我在我的测试代码中导入一个组件，我会收到一个来自我的节点模块的错误。

我的应用正在使用：React + Webpack + Babel。我有"react": "^0.14.8"、"enzyme": "^3.3.0",、"enzyme-adapter-react-14": "^1.0.5"、"jest": "^22.4.2"、"webpack": "^3.8.1"和"node": "5.6.0"。

我安装了 Enzyme & Jest，像这样写了简单的测试并通过了。

import enzyme, {shallow} from 'enzyme';

describe('Testing test', () => {
  it('This test will always pass!', () => {
    const test = "test"
    expect(test).to.have.length(4);
  })
})

这很好。但是当我导入组件时，只是导入，甚至不使用它，我得到一个错误：（更新：我觉得 package.json 中的 moduleNameMapper 不正确）

import DealList from './DealList';


Test suite failed to run

TypeError: (0 , _reactRedux.connect) is not a function

  35 |         case("integer"):
  36 |           return integer
> 37 |         case("required, integer"):
  38 |           return [required, integer]
  39 |       }
  40 |     }

  at createConnectedField (node_modules/redux-form/lib/ConnectedField.js:329:43)
  at createField (node_modules/redux-form/lib/createField.js:48:53)
  at Object.<anonymous> (node_modules/redux-form/lib/Field.js:17:45)
  at Object.<anonymous> (node_modules/redux-form/lib/index.js:122:14)
  at Object.<anonymous> (src/components/CreateDealForm/CreateFundDealForm.js:37:18)
  at Object.<anonymous> (src/components/index.js:24:28)
  at Object.<anonymous> (src/containers/DealList/DealList.js:35:19)
  at Object.<anonymous> (src/containers/DealList/DealList.test.js:7:17)

这是我的 package.json

"scripts" :{
   ...
    "test": "jest"
},
"jest": {
    "verbose": true,
    "setupTestFrameworkScriptFile": "<rootDir>test/setup.js",
    "moduleNameMapper": {
        "components(.*)$": "<rootDir>/src/components"
    },
    "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/redux-form/"
   ]
}

我的.babelrc：

{
  "presets": ["env", "stage-0", "react"],

  "plugins": [
  "syntax-dynamic-import",
  "dynamic-import-node",
  "transform-runtime",
  "add-module-exports",
  "transform-decorators-legacy",
  "transform-react-display-name"
  ],

  "env": {
    "development": {
    "plugins": [
    "typecheck",
    ["react-transform", {
        "transforms": [{
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
             }
         ]
       }]
    ]
  },
 "test": {
  "presets": ["env", "stage-0", "react"]
   }
 }
}

我的测试/setup.js

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-14'
import { expect } from 'chai';

Enzyme.configure({ adapter: new Adapter() })
global.expect = expect;

任何想法都会很棒。谢谢！

【问题讨论】：

如果你使用的是 Jest，那你为什么要使用来自 chai 的期望？
@VivekN 我刚刚发现 Jest 也有 expect。这有关系吗？
理想情况下它不应该影响代码，但是让我们删除任何不需要的东西。所以删除全局期望 chai 条目并再次尝试代码
@VivekN 我删除了它，但错误是一样的。我发现 package.json 上的 moduleNameMapper 是错误的，我改为 "^components(.*)$": "<rootDir>/src/components$1" 并解决了这个错误。并得到另一个要求我安装传统装饰器转换的工具，但它已经安装了。我将关闭这个问题，因为它已经解决了。并尝试找出新的。谢谢！如果您对新错误有想法，那将非常有帮助！再次感谢！
太好了，很高兴知道它已经解决了。

标签： reactjs unit-testing enzyme jestjs

【解决方案1】：

我发现 package.json 上的 moduleNameMapper 是错误的。这是正确的：

"jest": {
    "setupTestFrameworkScriptFile": "<rootDir>test/setup.js",
     "moduleNameMapper": {
         "^components(.*)$": "<rootDir>/src/components$1"
     },
    "verbose": true
 },

还有一个要求我安装传统装饰器转换，但它已经安装了。我会结束这个问题。

【讨论】：

我所要做的就是rm -rf node_modules yarn.lock && yarn。刚刚将一个非常定制的 cra v3 应用程序更新为 cra v4。开玩笑 26.