Redux + karma-webpack - React.Componentのインポート時にdisplayNameが未定義です。

Question

私はkarma-webpackを使用していますが、Reactコンポーネントを複数の場所でリファクタリングしています。私はコンポーネント を自分のファイルに移動したので、インポートすることができます。connectmapStateToProps/mapDispatchToPropsをHOCに適用して後で自分のページに組み込みます。ここで

はシナリオです：

EventTable - import S EventTableComponent、輸出connect編/包まれたコンポーネント MyEventTable - コンポーネント EventTableComponent包まimportのEventTableComponent、輸出connect edは/ - 小道具/行動は、データをレンダリングするために共有定義します行

git mv EventTableをEventTableComponentに変更し、コードをリファクタしてconnectedのものがHOCにある場合、テストが開始されます。輸入に失敗したのはEventTableComponentkarma-webpackのみです。 Chromeはうまく動作し、ビューは完全にレンダリングされます。 QAは満足していますが、ビルドに失敗します。 WrappedComponentは、概要（cannot read displayName of undefined）にメッセージをスローするconnectを引き起こしEventTableとMyEventTable部品、のために定義されていないので、

ビルドが失敗しているが、私も、私のテストにこれらのファイルのいずれかをインポートしないでください！代わりに、カルマwebpackがビルド中ではなく、テストを実行する前に失敗します。

私は、ビューを破壊し、このように「偽」/「交換」を行うことで、ローカルビルドを固定：

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コンポーネントでこのファイルをインポートして、私の環境変数に基づいて、私は右のいずれかを取得し、カルマのWebPACKが爆発ないだまされます。

私はいくつかのリードに基づいて、この結論に到着したが、クレジットは、このSOポストに行く：Woutをメルテンスへ Conditional build based on environment using Webpack

とも私を傾けるためのWebPACKギッターチャネルから問題がES6クラスのインポートであることに/エクスポート関連。