2

私は使用してkarma-webpackおり、複数の場所で使用するために React コンポーネントをリファクタリングしています。コンポーネントを独自のファイルに移動したので、後でページに含める HOC に/を適用することで、コンポーネントをインポートして別の方法で接続できます。mapStateToPropsmapDispatchToProps

シナリオは次のとおりです。

EventTable- imports EventTableComponent、connected / ラップされたコンポーネント をエクスポートしますMyEventTable- imports EventTableComponent、connected / ラップされたコンポーネント をエクスポートしますEventTableComponent- データ行をレンダリングするために共有される小道具 / 動作を定義します

私がgit mvEventTable にEventTableComponentコードをリファクタリングして HOC にあるようにすると、テストはでのみconnectedインポートに失敗し始めます。Chrome は問題なく動作し、ビューは完全にレンダリングされます。QA は満足している、または満足しているはずですが、私のビルドは失敗します。EventTableComponent karma-webpack

およびコンポーネントWrappedComponentに対して が定義されていないため、ビルドが失敗します。これにより、概要にメッセージがスローされます ( ) が、これらのファイルのいずれもテストにインポートしません! 代わりに、karma webpack のビルド中、ただしテストを実行する前に失敗します。EventTableMyEventTableconnectcannot read displayName of undefined

ビューを破棄し、次のように「偽物」/「交換」を行うことで、ローカルでビルドを修正しました。

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

ビルドは成功します。

このすべての中で最も紛らわしい部分は? 私は HOCをまったくテストしていません。私は EventTableComponent だけをテストにインポートしますが、 Redux Documentationkarma-webpackで提案されているように.

説明するために最小限の例の要点を書きました: https://gist.github.com/zdd45/cbc981e385dc33d6920d7fcb55e7a3e0

4

1 に答える 1