但这些测试是为了什么？

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

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

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

我为什么要测试？

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

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

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

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

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

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

测试有哪些类型？

前端需要开发的测试有很多种类型，但今天我将重点关注其中三种：用户界面测试（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 函数是否使用正确的数据调用，并且仅被调用一次。

验证测试

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

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

正在测试什么： 这里我们检查当电子邮件和密码字段填写无效数据时表单是否显示适当的错误消息。我们通过检查是否显示预期的错误消息来模拟输入不正确的值。

你明白为什么要测试吗？

在一个用户体验和软件质量优先的世界中，前端测试在确保我们的应用程序不仅正常运行，而且提供流畅、无错误的体验方面发挥着关键作用。

通过将这些测试集成到您的开发流程中，您不仅可以在问题变得令人头疼之前预防问题，还可以构建更可靠、更有弹性的代码库。每种类型的测试都有不同的验证层，它们一起形成一个大的安全层，有助于确保应用程序的质量和功能。

请记住，就像蛋糕配方中的每种成分都有其至关重要的作用一样，每种类型的测试在开发过程中都有其特定的功能，开发平衡的测试组合超出了推荐的做法，对于任何人来说都是必要的致力于提供高质量软件的团队。

因此，下次您开发新功能或修复错误时，请将测试视为您不可或缺的盟友。它们是为用户提供更强大、更可靠、最重要的是更令人满意的应用程序的关键。