Redux + karma在导入React.Component时无法读取未定义的displayName

Question

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

场景如下:

EventTable - import s EventTableComponent，导出connect ed/wrapped组件MyEventTable - import的eventtable组件，导出connect封装组件EventTableComponent -定义用于呈现数据行的共享道具/行为

当我git mv EventTable到EventTableComponent并重构代码时，connected的东西在hoc中，测试开始失败，仅在karma-webpack 中导入EventTableComponent 。Chrome工作得很好，视图渲染得很完美。QA很高兴，或者会很高兴，但是我的构建失败了。

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

我通过破坏视图并制作"假"/"替换"来修复本地构建，如下所示:

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

构建通过。

最令人困惑的部分是什么?我甚至根本没有测试HOC 。我只导入EventTableComponent到测试中，但karma-webpack，如Redux文档中建议的。

我写了一个最小的例子要点来说明: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就不会爆炸了。

我根据一些线索得出了这个结论，但这要归功于这篇文章:使用Webpack

基于环境的条件构建

以及Webpack Gitter频道的Wout Mertens向我提示ES6类导入/导出相关的问题