为什么应该开始在前端测试您的应用程序？

但这些测试是为了什么？

想象一下，您正在制作巧克力蛋糕，直到准备好后您才意识到忘记在面团中添加糖，现在怎么办？！将您的应用程序想象成这个蛋糕面糊，未经测试，它甚至可能一开始工作得很好，但在尝试的某个时刻，结果可能不会达到预期。谁保证不会发生这种麻烦？！

基于此示例，测试证明了您的代码量，它们确保一切都在正确的位置，即使您决定添加新层或功能覆盖率也是如此。

一般来说，自动化测试基本上是为测试其他代码而构建的代码，以确保应用程序的质量。
由于质量是关键词，因此工程和产品团队中的每个人都必须意识到测试产生的重要性和价值，以便它们能够以自然的方式集成到交付中。

我为什么要测试？

我在这里提出一些理由来说服您立即开始在代码中实现测试：

故障安全代码：测试有助于确保您的代码即使在添加新功能或进行更改后也能正常运行而不会出现错误。

无需担心的更改：应用程序维护将更加安全，因为您将能够重构或更新代码，而不必担心破坏某些内容，因为如果出现问题，测试会警告您。

更快的修复：通过自动化测试，您将能够更轻松地修复问题，节省更多时间

部署时减少意外：您能想象刚刚完成部署并且已经收到用户的电话，其中出现了可以预测的错误吗？！这些测试可以准确地帮助预防

帮助您和您的 QA 同事： 您知道什么时候您完成该功能并将其传递给 QA 进行测试，然后他给您一份包含 357 个需要修复的问题的报告吗？这个问题也会减少，因为你会预测到他可能遇到的大部分错误

测试有哪些类型？

前端需要开发的测试有很多种类型，但今天我将重点关注其中三种：用户界面测试（UI）、功能测试（端到端）和验证测试举例说明其中每一个，我将使用测试库为 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 函数是否使用正确的数据调用，并且仅被调用一次。

验证测试

验证测试确保应用程序验证无效输入并显示适当的错误消息。这些测试对于验证表单是否有效处理不正确的数据并向用户提供足够的反馈非常重要。

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中文网其他相关文章！