8 次の開発プロジェクトのための React テスト ライブラリとユーティリティ

テストによってアプリケーションに追加の機能が追加されることはありませんが、アプリケーションを本番環境に出荷する際の自信が高まります。

皆さんはすでにテストに精通しており、React アプリケーションのテスト ライブラリについて知るためにここに来たのだと思います。そうであれば、あなたは正しい場所にいます。さまざまな種類のライブラリを検討する前に、テストがアプリケーションの品質と開発時間にどのような影響を与えるかを簡単に見てみましょう。

テスト効果

アプリケーションのテストを書くのは時間がかかるプロセスだと感じる人もいるかもしれません。今回は省略しましょう。いいえ、アプリケーションのテストを書くのは時間の無駄ではありません。

テストをまったく行わないアプリケーションを開発したとします。 100以上の機能が搭載されています。かなりの期間が経過してから、たとえば 3 か月後です。クライアントは、あなたが以前に開発した 100 の機能のうち 5 つの新しい機能を追加し、2 つの機能を調整することを求めています。

何の問題もなく、すべてを完了し、コードを本番環境に出荷しました (通常のようにテストは行われません)。

数日後、クライアントが再びあなたのところに来て、古い機能が壊れていると言いました。そして、その理由が分かりませんでしたか？ここでも問題の解決にかなりの時間を費やしました。問題を解決し終えた後、あなたは自信を失い始めました。

その自信を得るにはどうすればよいでしょうか？

問題の解決に費やす余分な時間を節約できます。たった 1 つのこと、つまりテストだけですべてのことがうまくいきます。

アプリケーションのテストを作成したと仮定します。新しい機能を開発したり、古い機能を調整したりしたときに、テストを再度実行します。この場合、製品自体に進む前に問題について知ることができます。時間を大幅に節約し、アプリケーションの品質に自信を持てるようになります。

ここで、次の React プロジェクトに向けてさまざまなテスト ライブラリを検討します。

テストライブラリ

テスト ライブラリは、 UI コンポーネントのテストに役立つパッケージのグループです。私たちはReact Testing Librayに焦点を当てています。

React テスト ライブラリは、React DOM をテストするためのユーティリティの完全なセットを備えた軽量ライブラリです。これにより、ライブラリの実装の詳細を指定せずに反応コンポーネントをテストできます。テストが容易になるため、自信を得ることができます。

ほとんどの場合、 Jestテスト ライブラリと連携して動作します。テストのためのシンプルな方法とユーティリティを提供し、テストのベスト プラクティスに従うようにガイドします。

反応テスト ライブラリの機能の一部は次のとおりです。

• コンポーネントの内部状態のテストには関心がありません。
• コンポーネントのレンダリング結果をテストします。
• クラスのインスタンスの代わりに DOM ノードをテストします。
• これは、ライブラリ内の DOM 要素にアクセスするためのカスタム方法を提供します。
• UI が適切に動作していることを確認します。
• 大規模なコミュニティサポートがあります。

冗談

Jest は、JavaScript および TypeScript コードをテストするためのテスト フレームワークです。また、フロントエンド ライブラリとうまく統合されています。 Facebook によって開発および保守されています。 React チームは、React アプリケーションのテストにこれを推奨しています。

他のすべてのテスト ライブラリよりもダウンロード数が最も多いです。 Jest は、React テスト ライブラリと併せて、React テストにおいてさらに強力になります。そして、ほとんどの開発者はテストにこの組み合わせを使用しています。

Jest の機能の一部は次のとおりです。

• テストは互いに分離されています。
• コードカバレッジを提供します。
• これは速い。
• 関数をモックする方法を提供します。
• テスト用にさまざまな種類の例外を提供します。

酵素

この酵素は、 React コンポーネントをテストするためのテスト ユーティリティです。これにより、React コンポーネントのレンダリングされた出力をトラバースして簡単に操作できるようになります。 Airbnbによって作成されました。

React コンポーネントのテストには、jest、mocha、jasmine などの他のテスト ランナーと一緒に使用する必要があります。 React コンポーネントをレンダリングしてテストするための追加の簡単な方法を提供します。そして、それは React ライブラリでのみ動作します。

モカ

Mocha は、テストを簡単にするテスト フレームワークです。 NodeJS上で動作します。そのテスト ランナーは、React テスト用の他のテスト ライブラリと連携して動作します。

モカの特徴のいくつかは次のとおりです。

• テストカバレッジレポートを提供します。
• 設定ファイルで完全に設定可能。
• 非同期テストのタイムアウトのサポート。
• テストに基づくタイムアウト。
• 遅いテストも強調表示されます。

Mocha のホームページには他にもたくさんの機能が用意されています。

カルマ

Karmaはアプリケーションのテスト環境です。これにより、実際のブラウザーやデバイス (モバイル、タブレット、デスクトップ) でテストを実行できるようになります。開発者にテスト用にさまざまな環境を提供することを目的としています。

Karma の機能の一部は次のとおりです。

• 実際のデバイスでコードをテストします。
• これにより、PhantomJS のようなヘッドレス環境でコードをテストできるようになります。
• Karma をJenkins 、 Travis 、 Semaphoreなどの CI/CD ツールと統合できます。
• Mocha 、 Jasmineなどの他のテスト フレームワークと簡単に統合できます。
• IDE を使用するとデバッグが簡単になります。

ジャスミン

Jasmineは、JavaScript の動作駆動開発 (BDD) テスト フレームワークです。コードのテストに DOM は必要ありません。 Jasmine は、NodeJS コードのテスト用に設計されています。 Jasmine や他のテスト ライブラリを使用して React をテストできます。

ジャスミンの特徴は次のとおりです。

• テストを作成するためのクリーンで簡単な構文を備えています。
• フロントエンドとバックエンドの両方のテストを作成できます。
• Jasmine のコアには依存関係がないため、高速になります。

チャイ

Chai はアサーション ライブラリです。他の JavaScript テスト ライブラリと組み合わせることができます。 Chai は、 should 、 assert 、および非アサーションなどの機能を提供します。

ヒノキ

Cypress は、 JavaScript のエンドツーエンド テスト フレームワークです。これにより、ブラウザーでテストをセットアップ、作成、実行、デバッグできるようになります。作成した各テストのステータスに関する詳細なレポートを提供するダッシュボードがあります。

Cypress は実際のブラウザ環境でテストを実行するため、開発ツールにもアクセスできます。これは、アプリケーション内の機能のエンドツーエンドのフローをテストするために使用されます。

Cypress の機能の一部は次のとおりです。

• すべてのステップのスナップショットを確認できます。テストの実行中に各ステップのスナップショットを取得します。
• DevTools を使用するとデバッグが簡単になりました。
• React リアルタイム機能と同様に、テストに変更を加えると、Cypress は自動的にテストを再実行します。
• テストは、await ステートメントを使用せずに、出力を自動的に待機します。

結論

テストを書くことはあなたにとってもアプリケーションにとっても良いことです。困難な時に物事を楽にしてくれます。そこで言い訳をしないでください。記事内のテスト ライブラリの順序は重要ではありません。あくまでカウント用です。他の図書館よりも劣る図書館はありません。各ライブラリには独自の長所と短所があります。

React テスト ライブラリとJestを使用して、React アプリケーションの完全な機能をほとんどテストできます。そして、React コミュニティのメンバーのほとんどによって推奨されています。これら 2 つを使用することは必須ではありません。初心者の方は、ぜひ試してみてください。 React アプリケーションに特化したものを探している場合は、各ライブラリを調べてください。

テストをお楽しみください 🙂