Redux + karma-webpack - 在导入 React.Component 时无法读取未定义的显示名称

Question

我正在使用 karma-webpack 并且我正在重构一个 React 组件以在多个地方使用。我移动了组件到它自己的文件，所以我可以通过在我稍后包含在我的页面上的 HOC 中应用 mapStateToProps / mapDispatchToProps 来导入它和 connect 它。

场景如下：

EventTable - imports EventTableComponent，导出 connected / wrapped 组件 MyEventTable - imports EventTableComponent，导出 connected / wrapped 组件 EventTableComponent - 定义共享以呈现数据行的道具/行为

当我 git mv EventTable 到 EventTableComponent 并重构代码以便 connected 东西在 HOC 中时，测试开始无法导入 EventTableComponent 仅在karma-webpack。 Chrome 工作正常，视图呈现完美。 QA 很高兴，或者会很高兴，但我的构建失败了。

构建失败，因为 WrappedComponent 未定义 EventTable 和 MyEventTable 组件，这导致 connect 在概要中抛出消息（cannot read displayName of undefined)，但我什至没有将这些文件中的任何一个导入到我的测试中！相反，它在构建 karma webpack 时失败，但在运行任何测试之前。

我通过破坏视图并制作 "fake" / "replacement" 来修复本地构建，如下所示：

function EventTableComponent () { 
    return (<div>garbage here</div>);
}

构建通过。

所有这一切中最令人困惑的部分是什么？我什至根本不测试 HOC 。我只将 EventTableComponent 导入到测试中，但是 karma-webpack，如 the Redux Documentation.

中所建议的

我写了一个最简单的示例要点来说明： https://gist.github.com/zedd45/cbc981e385dc33d6920d7fcb55e7a3e0

Answer 1

我能够通过欺骗模块系统来解决这个问题。

// EventTableComponentWrapper.jsx

import EventTableComponent from './EventTableComponent';

if (process.env.NODE_ENV === 'test') {
    module.exports = require('./EventTableComponent.test.jsx');
} else {
    module.exports = EventTableComponent;
}

我在两个 HOC 组件中都导入了这个文件，并且根据我的环境变量，我得到了正确的一个，并且 Karma Webpack 被骗到没有爆炸。

我根据一些线索得出了这个结论，但归功于这个 SO Post：

还有来自 Webpack Gitter 频道的 Wout Mertens 向我提示了与 ES6 Class 导入/导出相关的问题。

Redux + karma-webpack - 在导入 React.Component 时无法读取未定义的显示名称

Redux + karma-webpack - cannot read displayName of undefined upon import of React.Component

reactjs

webpack

redux

react-redux

karma-webpack