酵素、ReactTestUtils、react-testing-libraryの違いについて
質問
反応テストのための酵素、ReactTestUtilsとreact-testing-libraryの違いは何ですか?
ReactTestUtilsのドキュメントに書いてあります。
ReactTestUtilsは、Reactコンポーネントを好みのテストフレームワークで簡単にテストできるようにします。 フレームワークで簡単にテストできるようにします。
酵素のドキュメントに書いてあるだけです。
Enzyme は React 用の JavaScript テストユーティリティで、React Components の出力をより簡単にアサーション、操作、追跡することができます。 React Components の出力をアサーション、操作、および追跡することを容易にします。
React-testing-libraryのドキュメントです。
react-testing-libraryは、Reactコンポーネントをテストするための非常に軽量なソリューションです。 Reactコンポーネントをテストするための非常に軽量なソリューションです。react-domの上に軽いユーティリティ機能を提供します。 react-domの上に軽いユーティリティ機能を提供します。
なぜ実際にはどのソリューションも簡単で、他のソリューションでは実現できないのでしょうか?
どのように解決するのですか?
ReactTestUtilsは、Reactコンポーネントをテストするための必要最低限のものを提供してくれます。大きなアプリケーションに使われているのを見たことがない。
Enzymeとreact-testing-libraryはどちらも良いライブラリで、アプリケーションをテストするために必要なすべてのツールを与えてくれます。しかし、それらは2つの異なった哲学を持っています。
Enzymeでは、コンポーネントの内部動作にアクセスすることができます。状態の読み取りと設定が可能で、テストの実行を高速化するために子プロセスをモックすることができます。
一方、react-testing-libraryは実装の詳細にアクセスすることはできません。コンポーネントをレンダリングし、それらと対話するためのユーティリティメソッドを提供します。このアイデアは、ユーザーが行うのと同じ方法でアプリケーションと通信するべきだというものです。ですから、コンポーネントの状態を設定するのではなく、ユーザーがその状態に到達するために行うアクションを再現するのです。
私の経験では、Enzymeは把握しやすいですが、長い目で見るとメンテナンスが大変です。react-testing-libraryは、平均してもう少し複雑なテストを書かなければなりませんが、自分のコードに高い信頼を与えるという報酬があります。
関連
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み】プリセットファイルはオブジェクトのエクスポートができない
-
[解決済み] ReactJS giving error Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] カスタマイズ素材UI チェックした場合としない場合の切り替え
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] npxとnpmの違い?
-
[解決済み] Reactのstateとpropsの違いとは?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み] Reactでes6クラスを使うときの「super()」と「super(props)」の違いとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] React テキストを挟んだ横長の仕切りを作る
-
[解決済み] reactでonloadを使うには?
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] ReactJsのCreateClassは関数ではない
-
[解決済み] React JS Jestで「SyntaxError: 予期しないトークン"
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] AxiosにCORSの問題が発生
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する