2

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

这是场景：

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

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

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

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

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

构建通过。

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

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

4

1 回答 1

0

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

// 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： Conditional build based on environment using Webpack

以及来自 Webpack Gitter 频道的 Wout Mertens，他向我介绍了与 ES6 类导入/导出相关的问题。

于 2016-08-26T14:28:55.803 回答