8 次の開発プロジェクトのための React テスト ライブラリとユーティリティ
公開: 2021-06-22テストによってアプリケーションに追加機能が追加されることはありませんが、アプリケーションを本番環境に出荷する自信が高まります。
あなたはすでにテストに精通していると思います.Reactアプリケーションのテストライブラリについて知るためにここに来ました. その場合、あなたは正しい場所にいます。 さまざまな種類のライブラリを調べる前に、テストがアプリケーションの品質と開発時間にどのように影響するかを簡単に見てみましょう。
テスト効果
アプリケーションのテストを書くのは時間がかかると感じる人もいるかもしれません。 今回はスキップしましょう。 いいえ、アプリケーションのテストを書くのは時間の無駄ではありません。
テストのないアプリケーションを開発したとしましょう。 100以上の機能を備えています。 かなりの時間が経過すると、たとえば 3 か月になります。 クライアントは、5 つの新しい機能を追加し、以前に開発した 100 の機能から 2 つの機能を微調整することを望んでいます。
問題はなく、すべてを完了し、コードを本番環境に出荷しました (通常のようにテストなしで)。 数日後、クライアントが再びあなたのところに来て、古い機能が壊れていると言いました。 そして、あなたはその理由を理解していませんでしたか？ ここでも、問題の解決にかなりの時間を費やしました。 問題を解決した後、自信を失い始めました。
その自信を得るには？
また、問題の解決に費やした余分な時間を節約できます。 1 つのことですべてが正しく行われます。つまり、テストです。
アプリケーションのテストを作成したとしましょう。 新しい機能を開発したり、古い機能を微調整したりしたら、再度テストを実行します。 その場合、製品自体に行く前に問題について知ることができます。 時間を大幅に節約し、アプリケーションの品質に自信を持つことができます。
今度は、次の React プロジェクト用にさまざまなテスト ライブラリを検討します。
ライブラリのテスト
Testing Library は、UI コンポーネントのテストに役立つパッケージのグループです。 私たちの焦点は、React Testing Libray にあります。
反応テスト ライブラリは、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 のコアには依存関係がないため、高速になります。
チャイ
Chaiis はアサーション ライブラリです。 他の JavaScript テスト ライブラリと組み合わせることができます。 Chai は、 should 、 assert 、および assertion以外の機能を提供します。
ヒノキ
Cypress は、JavaScript のエンド ツー エンドのテスト フレームワークです。 これにより、ブラウザーでテストをセットアップ、作成、実行、およびデバッグできます。 作成した各テストのステータスに関する詳細なレポートを提供するダッシュボードがあります。
サイプレスは、開発ツールにもアクセスできる実際のブラウザー環境でテストを実行します。 アプリケーション内の機能のエンド ツー エンド フローをテストするために使用されます。
サイプレスの機能の一部は次のとおりです。
- すべてのステップのスナップショットを見ることができます。 テストの実行中に、各ステップのスナップショットが作成されます。
- DevTools でデバッグが簡単になりました。
- React リアルタイム機能と同様に、テストに変更を加えると、Cypress は自動的にテストを再実行します。
- テストは、await ステートメントを使用せずに自動的に出力を待機します。
結論
テストを書くことは、あなたとアプリケーションにとって良いことです。 困難な時期に物事を容易にします。 それを言い訳にしないでください。 記事内のテスト ライブラリの順序は重要ではありません。 あくまでもカウント用です。 他のライブラリよりも低いライブラリはありません。 各ライブラリには、独自の長所と短所があります。
React Testing LibraryとJestを使用して、React アプリケーションの完全な機能をほとんどテストできます。 そして、ほとんどの React コミュニティ メンバーから推奨されています。 これら2つを使用することは必須ではありません。 初心者の方はぜひ挑戦してみてください。 React アプリケーションに固有のものを探している場合は、各ライブラリを調べてください。
ハッピーテスト