时间戳

首页 > 解决方案 > 可以手动测试 Web 应用程序吗？

reactjs - 可以手动测试 Web 应用程序吗？

问题描述

我正在学习 TDD 并尝试按照项目中的最佳实践编写测试。一般来说，我在 React 中编写前端，在学习的过程中，我在这里找到了 Robin 的一篇关于使用 react-testing-library 进行测试的好文章。我将使用 Robin 网站上的示例，但我在网上找到的其他示例也类似。因此，搜索用户输入的组件之一如下所示：

function Search({ value, onChange, children }) {
  return (
    <div>
      <label htmlFor="search">{children}</label>
      <input
        id="search"
        type="text"
        value={value}
        onChange={onChange}
      />
    </div>
  );
}

一个典型的测试用例如下所示：

describe('Search', () => {
  test('calls the onChange callback handler', () => {
    const onChange = jest.fn();

    render(
      <Search value="" onChange={onChange}>
        Search:
      </Search>
    );

    fireEvent.change(screen.getByRole('textbox'), {
      target: { value: 'JavaScript' },
    });

    expect(onChange).toHaveBeenCalledTimes(1);
  });
});

我的问题：

  1. 我们不能手动测试这个（或类似的场景）吗？
  2. 在浏览器上通过几次点击和输入来测试组件是否按预期工作是不是很容易和直观？

我认为唯一的缺点是要复制测试，我必须再次点击几下。

仅仅为了验证组件在某些用户操作后呈现它，模拟 api、回调等感觉有点矫枉过正。

当然，我在这里遗漏了一些东西。任何澄清都非常感谢。

标签： reactjstestingjestjstdd

解决方案

一切都有优点和缺点。TDD（行为驱动开发、单元测试、集成测试）的优点如下：

  • 您将不得不编写干净的代码。我的意思是你的方法/功能会很小，只会做一件事。您必须将圈复杂度保持在非常低的水平以使您的测试变小，每个控制结构都需要测试（ifs、switches..）。您将避免方法中的副作用。

  • 您将能够重构代码，因为在没有测试的情况下重构代码就像换了一个狗屎。

  • 这对团队和大型项目都有好处，你不可能知道所有的代码。代码中的任何更改都可能破坏功能，任何错误修复都可能产生其他几个错误。TDD 帮助我们。

...

...

缺点：

  • 您将不得不编写测试..更多代码。
  • 在你写作之前，你必须多想。
  • 在多变的项目中，您不仅要更改代码，还要更改测试

...

...

推荐阅读