Question

所以我想测试反应组件，我刚刚添加了测试库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＆amp; 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"]
   }
 }
}

my test / 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;

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

Answer 1

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

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

还有另一个要求我安装旧装饰器转换，但它已经安装。我将结束这个问题。

JEST测试套件无法运行：TypeError：（0，_reactRedux.connect）不是函数

1 个答案: