しかし、テストは何のためにあるのでしょうか？

チョコレート ケーキを作っているところを想像してみてください。準備ができた後で、生地に砂糖を加えるのを忘れたことに気づきました。どうすればよいでしょうか?!アプリケーションをこのケーキの生地のようなものとして考えてください。テストを行わなくても、最初はうまく動作するかもしれませんが、テスト中にある時点で期待どおりに動作しなくなる可能性があります。そして、この問題が起こらないことを誰が保証しますか？

この例に基づくと、テストはコードの量を証明するものであり、新しいレイヤーや機能範囲を追加することに決めた場合でも、すべてが適切な場所にあることを確認します。

一般に、自動テストは基本的に他のコードをテストするために構築されたコードであり、アプリケーションが高品質で動作することを保証します。
品質がキーワードであるため、エンジニアリング チームと製品チーム内で全員がテストが生み出す重要性と価値を認識し、自然な方法でテストを納品に組み込むことができるようにすることが重要です。

なぜテストする必要があるのですか?

今すぐコードにテストを実装し始めるよう説得する理由をいくつか紹介します:

フェイルセーフ コード: テストは、新しい機能を追加したり変更を加えた後でも、コードがバグなく動作することを確認するのに役立ちます。

恐れることなく変更: 何かが間違っている場合はテストが警告するため、何かが壊れることを心配することなくコードをリファクタリングしたり更新したりできるため、アプリケーションのメンテナンスがより安全になります。

迅速な修正: 自動テストを使用すると、問題をより簡単に修正できるようになり、時間を大幅に節約できます

展開中の驚きの軽減:展開を完了したばかりなのに、すでに予測できたエラーについてユーザーからの電話を受けていることを想像できますか?!検査はまさにこの予防に役立ちます

あなたと QA の同僚を助ける: その機能を完成させてテストのために QA に渡すと、357 個の修正すべき点が記載されたレポートが返されるのを知っていますか?彼が遭遇するであろうエラーのほとんどをあなたが予測していることになるので、この問題も軽減されるでしょう

テストにはどのような種類がありますか?

フロントエンドで開発するテストには多くの種類がありますが、今日はそのうちの 3 つに焦点を当てます。ユーザー インターフェイス テスト (UI)、機能テスト (エンドツーエンド)、検証テストです。それぞれを例として、テスト ライブラリを使用して React.js アプリケーションの簡単なログイン画面のテストを作成します。

ユーザー インターフェイス (UI) テスト

ユーザー インターフェイス (UI) テストは、コンポーネントが期待どおりにレンダリングされているかどうかをチェックし、レンダリングに基づいて行われることに加えて、フォーム フィールド、ボタン、ラベルなどの重要な要素の存在もチェックします。

it('should render login form', () => {
  render();
  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
  expect(screen.getByLabelText(/senha/i)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
});

テスト内容: このテストでは、LoginForm コンポーネントが電子メール フィールドとパスワード フィールド、ログイン ボタンなどの重要なインターフェイス要素をレンダリングすることを確認します。 screen.getByLabelText は関連するラベルで要素を検索し、screen.getByRole はテキストと機能でボタンを検索します。

機能テスト (エンドツーエンド)

機能テストまたはエンドツーエンド (E2E) テストでは、ユーザーの観点からアプリケーションの機能全体を検証し、フォームへの入力やボタンのクリックなど、インターフェイスとの実際の対話をシミュレートし、適切かどうかを評価します。アプリケーションは期待どおりに対話に応答します。

it('should call onLogin with the username and password when submitted', async () => {
  const handleLogin = jest.fn();
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: '[email protected]' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123456' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledWith({
      email: '[email protected]',
      password: '123456'
    })
  })

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledTimes(1)
  })

});

テスト内容: ここでは、電子メール フィールドとパスワード フィールドに入力し、ログイン ボタンをクリックすることによって、ログイン フォームとのユーザー操作がシミュレートされます。このテストでは、onLogin 関数が正しいデータで呼び出されているかどうか、および関数が 1 回だけ呼び出されているかどうかもチェックされます。

検証テスト

検証テストは、アプリケーションが無効な入力を検証し、適切なエラー メッセージを表示することを確認します。これらのテストは、フォームが間違ったデータを効果的に処理し、ユーザーに適切なフィードバックを提供することを確認するために重要です。

test('should show error messages for invalid inputs', async () => {
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'invalid-email' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  expect(await screen.findByText(/Email inválido/i)).toBeInTheDocument();
  expect(await screen.findByText(/A senha deve ter pelo menos 6 caracteres/i)).toBeInTheDocument();
});

テスト内容: ここでは、電子メール フィールドとパスワード フィールドに無効なデータが入力されている場合に、フォームに適切なエラー メッセージが表示されるかどうかを確認します。予期されるエラー メッセージが表示されるかどうかを確認することで、誤った値の入力をシミュレートします。

なぜテストする必要があるか理解していますか?

ユーザー エクスペリエンスとソフトウェアの品質が優先される世界では、フロントエンド テストは、アプリケーションが正しく機能するだけでなく、流動的でバグのないエクスペリエンスを提供することを保証する上で重要な役割を果たします。

これらのテストを開発フローに統合することで、問題が大きな問題になる前に回避できるだけでなく、より信頼性が高く回復力のあるコード ベースを構築することもできます。それぞれのタイプのテストには異なる検証層があり、それらが合わさって、アプリケーションの品質と機能を保証するのに役立つ大きなセキュリティ層を形成します。

各材料が重要な役割を持つケーキのレシピと同じように、各種類のテストには開発プロセスにおける特定の機能があり、バランスの取れたテストの組み合わせを開発することは、推奨される実践を超えたものであることを覚えておいてください。高品質のソフトウェアの提供に努めるチームです。

したがって、次回新しい機能を開発したりバグを修正したりするときは、テストを不可欠な味方として考えてください。これらは、より堅牢で信頼性が高く、そして何よりもユーザーにとってより満足のいくアプリケーションへの鍵となります。