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

【问题标题】：Redux + karma-webpack - cannot read displayName of undefined upon import of React.ComponentRedux + karma-webpack - 在导入 React.Component 时无法读取未定义的 displayName
【发布时间】：2017-01-02 11:05:27
【问题描述】：

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

这是场景：

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

当我将 git mv EventTable 更改为 EventTableComponent 并将代码重构为 connected 内容位于 HOC 中时，测试开始无法导入 EventTableComponent 仅在 karma-webpack 中。 Chrome 运行良好，视图渲染完美。 QA 很高兴，或者会很高兴，但我的构建失败了。

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

我通过破坏视图并像这样进行“假”/“替换”来修复本地构建：

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

构建通过。

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

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

【问题讨论】：

Wout Mertens（来自 Webpack Gitter）建议将 imports 替换为 require。这导致测试通过，但导入在应用程序中停止工作，因此组件未呈现。

标签： reactjs webpack redux react-redux karma-webpack

【解决方案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 帖子： Conditional build based on environment using Webpack

还有来自 Webpack Gitter 频道的 Wout Mertens，让我了解与 ES6 类导入/导出相关的问题。

【讨论】：

这仍然很老套，我喜欢更好的解决方案