フロントエンドでアプリケーションのテストを開始する必要があるのはなぜですか?

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

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

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

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

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

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

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

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

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

展開時の驚きが少なくなります: 展開を完了したばかりで、予測できたエラーが発生したユーザーからの電話を既に受信していることを想像できますか?!検査はまさにこの予防に役立ちます

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

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

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

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

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

it('should render login form', () => {
  render(<LoginForm  />);
  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(<LoginForm onLogin={handleLogin} />);

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'larissa.tardivo@email.com.br' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123456' },
  });

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

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledWith({
      email: 'larissa.tardivo@email.com.br',
      password: '123456'
    })
  })

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

});

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

検証テスト

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

test('should show error messages for invalid inputs', async () => {
  render(<LoginForm onLogin={jest.fn()} />);

  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();
});

O que está sendo testado: Aqui verificamos se o formulário está exibindo mensagens de erro adequadas quando os campos de e-mail e senha forem preenchidos com dados inválidos. Fazemos a simulação da entrada de valores incorretos verificando se as mensagens de erro esperadas são exibidas.

Entendeu por que você deve testar?

Em um mundo onde a experiência do usuário e a qualidade do software são prioridade, os testes no front-end desempenham um papel fundamental em garantir que nossas aplicações não apenas funcionem corretamente, mas também proporcionem uma experiência fluida e sem bugs.

Ao integrar esses testes no seu fluxo de desenvolvimento, você está não apenas prevenindo problemas antes que eles se tornem grandes dores de cabeça, mas também construindo uma base de código mais confiável e resistente. Cada tipo de teste tem uma camada diferente de verificação, e juntos, eles formam uma grande camada de segurança que ajuda a garantir a qualidade e a funcionalidade de sua aplicação.

Lembre-se, assim como em uma receita de bolo onde cada ingrediente tem seu papel crucial, cada tipo de teste tem sua função específica no processo de desenvolvimento e desenvolver uma combinação equilibrada de testes vai além de uma prática recomendada, é uma necessidade para qualquer equipe que se empenha em entregar um software de alta qualidade.

Então, da próxima vez que você estiver desenvolvendo um novo recurso ou corrigindo um bug, pense nos testes como seus aliados indispensáveis. Eles são a chave para uma aplicação mais robusta, confiável e, acima de tudo, mais satisfatória para seus usuários.

以上がフロントエンドでアプリケーションのテストを開始する必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。