babel, jest: TypeError: (0 , _connector2.default) 不是函数

Question

我的 jest 测试出错了，但我的应用程序编译（webpack）并运行没有错误。我最近确实切换到 babel-preset-env 但我仍然遇到同样的错误。

相关包.json：

"jest": "^20.0.4",
"jest-fetch-mock": "^1.0.8",
"babel-core": "^6.22.1",
"babel-jest": "^20.0.3",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",

.babelrc

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    ["inferno", {"imports": true}],
    ["transform-es2015-classes", {"loose": true}]
  ],
  "env": {
    "test": {
      "presets": ["es2015", "stage-0"]
    }
  }
}

src/js/modules/ui/components/UIObject/index.jsx 直到第 17 行

import TwitterComponent from './twitter';
import AdComponent, { networks } from './ad';
import RssComponent from './rss';
import WwwComponent from './www';
import connector from '../../connector';
const types = ['twitter', 'ads', 'rss', 'www'];
const getTitleByType = (type, data) => {
    const titles = {
        twitter: data['data-widget-id'],
        ad: `${networks[data.network]} (${data.key})`,
        ads: `${networks[data.network]} (${data.key})`,
        rss: data.url,
        www: data.url
    };
    return titles[type];
};
const Ad = connector(AdComponent, ['noSubmit', 'ads']);
...

../../connector.js

import { connect } from 'inferno-redux';
import { actions } from './reducers/main';
import { bindActionCreators } from 'redux';
import Immutable from 'seamless-immutable';
const connector = (component, keys = null) => {
    const mapDispatchToProps = dispatch => {
        return bindActionCreators(Object.assign({}, actions), dispatch);
    };
    const mapStateToProps = state => {
        const _state = {};
        const stateKeys = Object.keys(Immutable.asMutable(state.main));
        for (let key of stateKeys) {
            if ((Array.isArray(keys) && keys.includes(key)) || keys === null) {
                _state[key] = Immutable.getIn(state.main, [key]);
            }
        }
        return _state;
    };
    return connect(mapStateToProps, mapDispatchToProps)(component);
};
export { connector };
export default connector;

控制台输出：

FAIL  src/__tests__/modules/ui/components/Main/index.spec.jsx
  ● Test suite failed to run

    TypeError: (0 , _connector2.default) is not a function

      at Object.<anonymous> (src/js/modules/ui/components/UIObject/index.jsx:17:109)
      at Object.<anonymous> (src/js/modules/ui/components/UIObjectsComponent/index.jsx:2:43)
      at Object.<anonymous> (src/js/modules/ui/reducers/main.js:367:305)
      at Object.<anonymous> (src/js/modules/ui/connector.js:2:39)
      at Object.<anonymous> (src/js/modules/ui/components/Main/index.jsx:3:44)
      at Object.<anonymous> (src/__tests__/modules/ui/components/Main/index.spec.jsx:3:13)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        14.381s

供参考：

github issue

Answer 1

您的代码中有循环依赖。您可以在堆栈跟踪中看到它：

at Object.<anonymous> (src/js/modules/ui/components/UIObject/index.jsx:17:109)
at Object.<anonymous> (src/js/modules/ui/components/UIObjectsComponent/index.jsx:2:43)
at Object.<anonymous> (src/js/modules/ui/reducers/main.js:367:305)
at Object.<anonymous> (src/js/modules/ui/connector.js:2:39)
at Object.<anonymous> (src/js/modules/ui/components/Main/index.jsx:3:44)
at Object.<anonymous> (src/__tests__/modules/ui/components/Main/index.spec.jsx:3:13)

从下往上：

1. connector.js:2:39这个文件正在加载，正在运行

   import { actions } from './reducers/main';
   

2. 加载更多文件

3. 加载更多文件

4. UIObject/index.jsx:17:109这个文件正在加载，然后运行

   import connector from '../../connector';
   

但是这个循环是行不通的。 connector.js 在第 3 步停止运行，在它到达线路之前

const connector = (component, keys = null) => {

意味着当它在步骤6 中运行导入时，connector 还不存在。

在真正的 ES6 环境中，这段代码实际上会抛出一个异常，就像你做的那样

connector()
let connector = ...

但 Babel 目前不处理这些情况，因此该值仅显示为 undefined。

您必须重新编写代码，使这种循环依赖不存在。