このテキストは、運営している韓国のブログを日本語に翻訳したものです。
韓国のブログ：https://yunsuu.notion.site/e379eccd32c545419f0651f743c12c13?v=35310b282de24cc5a292fe45cc498a32&pvs=74
アプリテストが必要な理由
アプリをテストする必要がある理由は、コーディングをするときに最も楽しい瞬間は、自分の作りたいプロジェクトを作るときです。しかし、最も面倒な瞬間は、自分が作ったプロジェクトにどんなバグがあるかをテストするときです。
また、実際にテストしても、自分のコンピュータではうまく動かないことがあります。まるでバグが一つもないかのようです。
そのため、テストしても、そこまで細かくできないようです。しかし、6か月間のSWマエストロコースを経て、この考え方はだんだん変わってきました。
協力して長期間にわたって実際のユーザーが使用する価値のあるソフトウェアを作ると、規模が大きくなる可能性があり、個人プロジェクトとは異なり、もしかしたら動かない部分があるかもしれないので、細心の注意が必要です。しかし、数多くの機能追加と数多くのビルドプロセスの中で、これを細心の注意を払ってチェックするのは簡単ではありません。実際の会社では、このようなテスト部分を担当している部署であるQA部署も存在します。
アプリのテストの必要性を感じる中、幸運にもシーケンスインターンプログラムを通じてReact Webテストを書いてみる機会がありました。直接テストコードを書きながら学んだことや感じたことを整理してこの文章を書くことにしました。
e2e test, unit test
テストにはさまざまな種類があります。
いや、テストをするなら一度だけすればいいのに、なぜこんなにも面倒くさいのか…と思いました。しかし、直接コードを書きながら、各テスト段階での役割や重要性を学ぶことができました。細かく分ければキリがないので、大まかに2つに分けてみましょう。
e2e test
e2eテストは、ユーザーがアプリを利用する際に目に見えるものをテストするプロセスです。例えば、ログインができない場合や、クリックすべきボタンが非活性化されている場合など、ユーザーが直接経験するエラーを確認するレベルです。これはテストの段階で、最もユーザーと直接関連する段階です。e2eテストをサポートする多くのソフトウェアがあるかもしれませんが、私はCypressを使用してe2eテストを書いてみました。
unit test
Cypressを利用したe2etestを作成してみる
簡単なテストコードの例
Cypressは、CSSセレクタを使用してHTML上に表示されている要素を選択することができます。レンダリングされた私のプロジェクトのHTMLのタグ、クラス、IDの値を適切に選択してみましょう！
以下は、メールアドレスとパスワードを入力し、ボタンをクリックして"/success"にリダイレクトされるかどうかをテストするコードです。
こちらの公式ウェブサイトでは、さまざまな要素を選択する方法やさまざまなイベントを実行する方法など、さらに多くの情報が提供されています。興味がある場合は、Cypressの公式ウェブサイトを訪れてみてください。
React Testing Libraryを使用してユニットテストを書
リアクト テスティング ライブラリは Enzyme とは異なり、すべてのテストを DOM 中心で行います。これは、コンポーネントの props や state を直接参照せず、予想どおりの動作を確認するためです。そのため、予想どおりの動作であれば成功と見なされます。
また、Enzyme は様々な機能を提供しますが、リアクト テスティング ライブラリは必要な核心機能のみを提供し、軽量です。プロジェクトの規模が大きくなると、Enzyme を使用することが有利ですが、単純なプロジェクトではリアクト テスティング ライブラリを使用することが良い選択肢になるかもしれません。
ログインテストコードを作成してみよう
実際のテストコードを書きながら感じたこと
インターンとして実際のテストコードを書きながら感じたことは、E2Eテストよりもユニットテストのテストコードを書く方がより難しいという点です。やはりユニットテストはコードレベルに近く、プロジェクトの構造をよく理解し、基本的なJavaScriptの知識も堅固でなければ、コードとピッタリと一致するテストコードを書くことができません。もしテストコードを一度書いてみたいと思っている人がいるなら、E2Eテストから学ぶことをお勧めします。