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

我正在使用并且正在重构React组件，以便在多个地方使用。我移动了部件 到它自己的文件，这样我就可以通过在我稍后包含在页面上的HOC中应用

MapStateTrops

/

mapDispatchToProps

以不同的方式导入它和它

以下是场景：

EventTable

-

import

s EventTable组件，exports

connect

ed/wrapped组件

MyEventTable

-

导入

s EventTableComponent，导出

connect

ed/wrapped组件

EventTableComponent

-定义用于呈现数据行的共享道具/行为

当我

git mv

EventTable到

EventTableComponent

并重构代码，使

连接的
东西在HOCs中时，测试开始无法导入
EventTableComponent
仅在
karma网页包中导入
EventTableComponent
。Chrome工作正常，视图渲染完美。QA很高兴，或者会很高兴，但是我的构建失败了

构建失败是因为
WrappedComponent
未为
EventTable
和
MyEventTable
组件定义，这导致
connect
在摘要中抛出消息（
无法读取未定义的displayName
），但我甚至没有将这些文件导入到我的测试中！相反，它在karma webpack构建时失败，但在运行任何测试之前失败

我通过破坏视图并进行如下“假”/“替换”修复了本地构建：

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

函数EventTableComponent（）{
返回（此处为垃圾）；
}

构建通过

这一切中最令人困惑的部分是什么？我甚至根本不测试HOC。我只将EventTableComponent导入测试，但是
karma webpack
，如中所建议

我写了一个简单的例子来说明：
我通过欺骗模块系统解决了这个问题

// 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 Gitter频道的Wout Mertens，他们向我透露了与ES6类导入/导出相关的问题。
Wout Mertens（来自Webpack Gitter）建议将
导入
替换为
需要
。这导致测试通过，但导入在应用程序中停止工作，因此组件没有呈现。这仍然是黑客行为，我喜欢更好的解决方案