React テストライブラリ 基礎
Reactコンポーネントとアプリケーションの堅実なテストを作成するために必要なすべてを学びましょう。
本日ではコードの書き方の前にReactコンポーネントをテストするために設計された人気のあるライブラリまたはフレームワークをご紹介していきます。
なぜ使用するのか？
Reactでのアプリケーションを自信を持ってリリースしたい場合、そしてもちろんそうしている場合は、変更がユーザーに届いたときに何も壊れていないことを完全に確認するための優れたテストが必要です。
適切に機能するアプリケーションを構築するにはテストは必要不可欠となります。
軽量ライブラリは、ユーザーと同じようにコンポーネントを使用するテストを生成し、開発者にアプリケーションがユーザーに公開されたときに機能しますという確信を与えます。
つまりReactコンポーネントをテストしてReactコンポーネントを完全に信頼する方法という事です。
ユーザーの観点から正しく機能することを確認するテストを書く必要があります。
多くの場合では、Reactコンポーネントの単体テストを作成するのが一般的な方法です。
単体(ユニットテスト)でのテストは、独立した共有可能なコンポーネントにおいて、プロジェクト間でコンポーネントを共有する場合、テストはコンポーネントが期待どおりに動作することそして
コンポーネントが独立していて再利用可能であることの両方を検証する方法として機能します。
ですがReactアプリでの作成はコンポーネントの作成がすべてとなります、単体テストだけではアプリにバグがないことを確認するのは非常に困難です。
構成されたコンポーネントが多数ある場合はそれらが互いにどのように相互作用するかをテストしていかなければいけません。
統合テストでは単体テストよりもコストがかかり、複雑になる可能性はありますが、コンポーネントの構成がUXになることを確認するため、Reactアプリに変更を加える際の安心感を維持するのに役立ちます。
Reactコンポーネントのテストに関して、最も人気のあるテストフレームワークの1つは『Enzyme(エンザイム)』となりますが
本日はReact Testing Library(RTL)を重点的にご紹介致します。
RTLは『Enzyme』の代替えライブラリとなるものです、後ほど説明致します。
Enzymeは、Reactアプリケーションの単体テストで非常に人気のあるライブラリとなっております。
Enzymeの公式ドキュメントではこう書かれています
EnzymeのAPIは、DOMの操作とトラバーサルのためにjQueryのAPIを模倣することにより、直感的で柔軟になることを目的としています。
Airbnbによって作成されたEnzymeは、コンポーネントのレンダリング・要素の検索・いくつかの優れた追加のユーティリティメソッドを追加します。
すでにCRAにバンドルされているツールに加えて追加のピア依存関係がある場合があり他をインストールする必要があります。
Jestとenzymeは同じ？
JavaScriptテストフレームワークでありテストランナーと呼ばれ、幅広いカテゴリのユーティリティに適合する素晴らしいテストランナーです。
JestとEnzymeはどちらもReactアプリケーションをテストするように特別に設計されています、Jestは他のJavascriptアプリで使用できますが、EnzymeはReactでのみ機能致します。
そんなReact専用のテストライブラリである『Enzyme』非常に人気もありますが単体での使用は推奨は致しません。
『Enzyme』はReactフックとReact 17以降をサポートしていません。
EnzymeではReact16までとなります。
Enzymeを使用してテストしようとすると、下記のエラーが発生します。
Hooks can only be called within the body of a function component.
【フックは、関数コンポーネントの本体内でのみ呼び出すことができます。】
このエラーは、ReactフックがまだEnzymeでサポートされていないことを意味致します。
貴方が最新のReactバージョンでプロジェクトを開始する場合、Enzymeを選択することは非常に危険なので注意して下さい。
Enzymeを使用する場合は、JestとEnzymeを一緒に使用すれば、Reactコンポーネントのテストがはるかに簡単になり、非常に読みやすいテストが可能になりますのでお試し下さい。
React Testing Library(RTL)とは
Reactコンポーネントは、DOMを更新するための命令を提供します。
つまり、コンポーネントをテストするにはレンダリングを実行し、生成されたDOMを確認して期待したものと比較する必要性があるのです。
React Testing Library(RTL)、このライブラリは単体テストと統合テストに重点を置いたReactコンポーネントをテストする別の方法を促進し、コンポーネントをテストするための非常に軽量なソリューションです。
アプリケーションのテストに焦点を当てたAPIを提供するライブラリであり
ReactコンポーネントではなくHTML要素を返すAPIと、テキストコンテンツまたはHTMLデータ属性でクエリを実行するクエリ関数となります。
レンダリングされたReactコンポーネントのインスタンスを処理するのではなく、テストはDOMノードで機能致します。
このライブラリではアプリケーションへのアクセスを容易にし、ユーザーと同じようにコンポーネントを使用するようにテストを近づけることができます。
テストにより実際のユーザーがアプリケーションを使用したときにアプリケーションが機能することを確信できます。
CRAではRTLをすぐに開始する事が可能です。
npmまたはyarnを介してインストールします。
yarn add -D @testing-library/react or npm install --save -dev @testing-library/react
RTLとJestとの違い
基本的には『Jest』の使用を優先することをお勧めしますがライブラリはどのフレームワークでも機能致します。
Reactの初心者は、Reactでテストするためのツールを混同することがよくあります。
勘違いをしてはいけないのはRTLはEnzymeの代わりとなるものですが、Jestの代わりにはなりません異なるものです。
どう異なるのか？
JestはJavaScriptおよびTypeScriptコードをテストする為のフレームワークのテストランナーであり、コマンドラインでJestを使用しテストを実行します。
一方でReact Testing Libraryは、 Enzymeと同様に、Reactコンポーネントをテストするための専用テストライブラリだと思って下さい。
Reactコンポーネント・レンダリング・画面・クエリメソッド・アサーションメソッドなどのDOMテストを対象とした多くの機能を提供致します。
RTLを使用してReactアプリの統合テストを作成すれば、開発速度を損なうことなくコードの保守性を向上させることも容易となります。
テストを書くことは貴方とアプリケーションにとって非常に良いことです。
テストライブラリは数え切れないほどあり、各ライブラリには独自の長所と短所があります。
ほとんどの場合ではRTLとJestを使用し、Reactアプリケーションの完全な機能をテスト致します。
これらはReactコミュニティメンバーによって推奨されています。
さまざまな各ライブラリを調べて是非試してみて下さい。
テストコードの書き方は別途また記事に致しますのでお待ち下さい。
本日は以上となります。
最後まで読んで頂きありがとうございました。
