問題タブ [enzyme]

Reactコンポーネントの動作をテストするために、酵素+モカ+チャイでjsdomを使用しています。コンポーネントには（通常の を使用して）DOMノードにフォーカスするメソッドがあり、node.focus()呼び出されたときにノードが実際にフォーカスされていることをテストしたいと思います。

どのノードがフォーカスされているかを知るためdocument.activeElementに、フォーカスされると予想されるノードと比較します。

ただし、jsdom 9.1+ にアップグレードした後は、ノードのメソッドを呼び出した後でもdocument.activeElement常に のようです。HTMLBodyElementfocus()

jsdom 9.0 では、テストは正常に実行されます。

jsdom 9.1+には focus イベントに関連するいくつかの変更が含まれているdocument.activeElementと読みましたが、makeが期待どおりに動作する方法を理解できませんでした。何か助けはありますか？

この質問を投稿する前に、sqa stackexchange を検索しようとしましたが、shallow と render に関する投稿が見つからなかったので、誰かが私を助けてくれることを願っています。

反応コンポーネントのテストで浅いとレンダリングをいつ使用する必要がありますか? airbnbのドキュメントに基づいて、2つの違いについていくつか意見を述べました。

1. シャローはコンポーネントをユニットとしてテストしているため、「親」コンポーネントに使用する必要があります。(例: テーブル、ラッパーなど)

2. Render は子コンポーネント用です。

私がこの質問をした理由は、どちらを使用すべきかを判断するのに苦労しているためです (ドキュメントでは非常に似ていると書かれていますが)。

では、特定のシナリオでどちらを使用するかを知るにはどうすればよいでしょうか?

以下は私のReactコンポーネントです：

とてもシンプルな React コンポーネントです。Enzyme と Mocha を使用したテストを始めたばかりで、次のコードを書きました。

これを実行すると、次の警告が出力されます。

Component : WholeTab 警告: React.createElement: type は null、undefined、boolean、または number であってはなりません。文字列 (DOM 要素の場合) または ReactClass (複合コンポーネントの場合) である必要があります。

そして次のエラー：

TypeError: 未定義のプロパティ 'propTypes' を読み取れません。

どんな助けでも大歓迎です。

テストしたい次の機能がある次のような状況がありますが、これを達成する方法についてデバッグステートメントや Enzyme のドキュメントで見つけることができないようです:

次のように、アプリを高次関数でラップしています。

最初に、applyData がデータを props として正しく渡しているかどうか、および他の条件をチェックする機能などをテストしたいと思います。要するに、プロバイダーはデータをコンテキスト内に設定し、applyData は基本的にデータを props としてラップされたコンポーネントに渡します。

マウント、シャローなどを試しましたが、次のいずれかで必要な情報を取得できません。

mount(<myHighchartsComponent />)ハイチャートが本来のdivでレンダリングされない場合。私が得るのは次のとおりです。

コンポーネントはブラウザで完全にレンダリングされています。

詳細:

何か案は？

現在、React Native コンポーネントをテストするための推奨される方法は、モカ、react-native-mock、および酵素の組み合わせを使用してコンポーネントを浅くレンダリングすることです。

問題は、浅いレンダリングが 1 レベルの深さしかないことです。また、コンポーネントにネストされたビューが含まれている場合があり、追加のレベルを 1 つまたは 2 つテストする必要があります。

理論的には、酵素はmount()コンポーネントを完全にレンダリングすることをサポートしていますが、実際には、react-native-mock のViewモックが children に再帰しないため、これは失敗します。

これらの制限に照らして、人々はコンポーネントを 1 つのレンダー レベルよりも深くどのようにテストしているのでしょうか?

Enzymeの浅いレンダリングと、テストごとに浅いレンダリングを再実行する時間について、作業中です。メソッド、クリック、セレクターの長さなど、テストを実行する前にコンポーネントを 1 回浅くレンダリングすると、毎回ではなく、テストがより速く実行される可能性があることをお勧めします。

どちらの方法がより速く、どちらの方法にも落とし穴があるかどうかを指摘できる専門家はいますか? これらの例では、AVAランナーを使用しています (そして、議論のために少し工夫されています)。

たとえば、ここに 1 つの方法 ( A ) があります...

そして、これがもう1つ（B）です...

テスト B では、props 以外は基本的に何も変更されていない場合に、各テストに新しい浅いラッパーがあることに注意してください。

100 回のテストの過程で、完了までの時間の差はどの程度になると予想されますか?

また、より高いスコープでの浅いレンダリング (テスト A) がテスト状態を汚染する可能性はありますか?