react hooks testing library
v8.0.1
シンプルで完全な React フック テスト ユーティリティは、適切なテストの実践を促進します。
現在のバージョンのreact-testing-library使用している場合は、次のように置き換えます。
import { renderHook } from '@testing-library/react-hooks'と
import { renderHook } from '@testing-library/react'置き換えると、 @testing-library/react-hooksアンインストールできます。
React 18 の変更の一部として、このライブラリによって提供されるrenderHook API が、 react-testing-library (PR) とreact-native-testing-library (PR) の両方への公式追加として組み込まれることが決定されました。その目的は、より一貫性のある一貫した実装をユーザーに提供することです。
それぞれのテスト ライブラリでこれらの変更を最終決定するまで、しばらくお待ちください。それまでの間、 @testing-library/react@^13.1をインストールできます。
useCounter.jsuseCounter.test.js素晴らしいカスタム フックを作成しており、それをテストしたいと考えていますが、それを呼び出すとすぐに次のエラーが表示されます。
不変違反: フックは関数コンポーネントの本体内でのみ呼び出すことができます。
このフックをテストするためだけにコンポーネントを作成することは実際には望ましくなく、特に全体をどのように接続するかの複雑さを考慮すると、フックを更新できるさまざまな方法をすべてトリガーする方法を検討する必要があります。 。
react-hooks-testing-libraryと、関数コンポーネントの本体内でフックの実行を処理する React フックの簡単なテスト ハーネスを作成できます。また、入力を更新したり、驚くべき関数の出力を取得したりするためのさまざまな便利なユーティリティ関数を提供することもできます。カスタムフック。このライブラリは、実際のコンポーネント内からフックをネイティブに使用することにできるだけ近いテスト エクスペリエンスを提供することを目的としています。
このライブラリを使用すると、フックをテストするために React コンポーネントを構築、レンダリング、操作する方法を気にする必要がなくなります。フックを直接使用して結果をアサートするだけです。
useCounter.js import { useState , useCallback } from 'react'
function useCounter ( ) {
const [ count , setCount ] = useState ( 0 )
const increment = useCallback ( ( ) => setCount ( ( x ) => x + 1 ) , [ ] )
return { count , increment }
}
export default useCounteruseCounter.test.js import { renderHook , act } from '@testing-library/react-hooks'
import useCounter from './useCounter'
test ( 'should increment counter' , ( ) => {
const { result } = renderHook ( ( ) => useCounter ( ) )
act ( ( ) => {
result . current . increment ( )
} )
expect ( result . current . count ) . toBe ( 1 )
} )より高度な使用法についてはドキュメントを参照してください。
npm install --save-dev @testing-library/react-hooksreact-hooks-testing-libraryテスト対象の特定のバージョンをインストールできるようにreactのバージョンにバンドルされていません。また、特定のレンダラーはインストールされていません。現在、 react-test-rendererとreact-domをサポートしています。どちらか 1 つをインストールするだけで済みますが、両方をインストールしている場合は、デフォルトとしてreact-test-renderer使用します。詳細については、インストールに関するドキュメントを参照してください。通常、インストールされているreactのバージョンと選択したレンダラーのバージョンは一致する必要があります。
npm install react@^16.9.0
npm install --save-dev react-test-renderer@^16.9.0注: サポートされる最小バージョンの
react、react-test-renderer、およびreact-domは^16.9.0です。
API リファレンスを参照してください。
これらの素晴らしい人々に感謝します (絵文字キー):
マイケル・ペイパー ? ? ? | オトフスクエア | パトリック・P・ヘンリー ? ? | マテウス・マルケス | ドゥルブ・パテル ? ? | ナサニエル・タッカー ? ? | セルゲイ・グリシチェンコ ? |
ジョセップ・M・ソブレペール | マルセル・ティナー | ダニエル K. ? | ビンス・マローン | セバスチャン・ウェバー | クリスチャン・ギル | JavaScript ジョー ✅ |
サラ・ダヤン ? | ロマン・グセフ | アダム・セッケル | 佐々木圭哉 | フー・チェン | ジョシュ ? ? | ナアマン・ヒルシュフェルト |
ブレイドン ホール | ジェイコブ・MG・エヴァンス | タイガー・アブロディ | アムル・A・モハメッド | ユハナ・ジャウヒアイネン | イェンス・マインデルツマ | マルコ・モレッティ ? |
マーティン V. | エロザック | ニック・マッカーディ ? | アリア | しびれ86 | アレックス・ヤング ? | ベン・ランバート |
デビッド・チョーレラット | エヴァン・ハーモン | ジェイソン・ブラウン | カーウィー・テン | レオニード・シャガブディノフ | リーバイ・ブッチャー | ミケーレ・セッテパニ |
サム | タナイ・プラタップ | トム・リース・ハードマン | イクバル125 | クリフザオブプト ? | ジョン・クープス | ジョナサン・ペイパー ? |
ショーン・ベインズ | ミハイル・ヴァシン | アレクサンダル・グルビッチ | ジョナサン・ホームズ | マイケル・デ・ボイ ? | アントン・ジノヴィエフ ? | マリアンナ・エクセレート ? |
マタン・ボレンクラウト ? | アンディルーガー | ブライアン・ウェイン ? ? | ロバート・スノウ | クリス・チェン | マシャス | 雷樹新 |
このプロジェクトは、全員参加者の仕様に従っています。あらゆる種類の貢献を歓迎します!
貢献したいとお考えですか? 「Good First Issue」ラベルを探してください。
バグ、ドキュメントの不足、または予期しない動作については問題を提出してください。
バグを参照
新機能を提案するには問題を提出してください。 ? を追加して機能リクエストに投票します。これは、メンテナが作業すべき内容に優先順位を付けるのに役立ちます。
機能リクエストを参照
ライブラリの使用に関する質問については、ここで問題を提起するか、サポート コミュニティにアクセスしてください。
マサチューセッツ工科大学
