jest でコンポーネントの機能をテストする方法

Question

こんにちは、私は単体テストの初心者です。製品のリストをレンダリングしてそれらのリストを表示するコンポーネントを持っています。このコンポーネントには、これらの製品を価格帯でフィルタリングする機能もあります。私は基本的に 2 つの状態変数「priceFrom」と「priceTo」を更新する ReactSlider を使用しています。これらの状態変数が変化すると、それらの価格に基づいて製品をフィルターする関数をトリガーします。そこで、同様の機能を jest でテストしたいと思いました。冗談を言うことは可能ですか？そうである場合、どうすればこれを達成できますか。そうでない場合、このコンポーネントの単体テストを実行するためにどのような代替手段を講じることができますか。ありがとう。このコンポーネントのコードは次のとおりです。以下のコードでは、ReactSlider が値を更新すると、filterItem 関数が製品をフィルターし、UI を更新することに注意してください。

ああああ

Answer 1

あなたの問題に関連した提案をいくつか提供させていただきます

• React 要素のテストに役立つライブラリ (react-testing-library など) をチェックしてください。 https://testing-library.com/docs/react-testing-library/intro/)

• 通常、別のライブラリの何かはテストされません。これは、ライブラリ自体がテストしていると想定しているためです (この場合は ReactSlider ライブラリです)。

• コンポーネントをより小さなコンポーネントに分割してみてください。これにより、テストが容易になり (小道具を使用できます)、各コンポーネント内の依存関係が少なくなります

• ここでのテストは、

  E2E と 単体テスト の 2 つの異なるテストに分けることができます。E2E は、ユーザー インタラクションをシミュレートするツールを使用する場合です。この場合、ユーザーがレンジ スライダーを動かすのをシミュレートし、その後何が起こるかを確認できます (これには、サイプレスまたはセレンを使用できます) これらのツールはブラウザーで人間のように実行され、単体テストにより、機能、コンポーネントの入力、出力をテストできます。クリックとインタラクションをシミュレートしますが、単体テスト (この場合はジョーク ツール) は実際のブラウザー (簡単に言えば) のシミュレーションである JSDOM でテストを実行するため、ユーザー インタラクションに関しては E2E ほど強力ではありません。

これを修正するには、次のことを行います

テスト ライブラリと jest をインストールして表示する

• コンポーネントをより小さなコンポーネントに分割します
• ReactSlider テスト自体をスキップしてライブラリに委任してみてください
• 単体テストでは、(別のコンポーネントに分離した後) props が渡されるフィルターをテストし、テスト ライブラリを使用して、さまざまな props が渡されたときにフィルターがどのように動作するかを確認できます
• Cypress または Selenium を使用すると、ブラウザでスライダーを動かしたときに何が起こるかをより深くテストできます
サイプレス:

https://www.cypress.io/

セレン: https://www.selenium.dev/
E2E と単体テストは、探しているものに応じて最適な 2 つのアプローチであることに留意してください。それぞれのアプローチはユーザー インタラクションをシミュレートしますが、その背後には異なるエンジンがあります

お役に立てば幸いです