我应该在 ReactJs 应用程序中测试什么？

Question

我开始更好地学习 TDD 并且我正在学习很多文章......

例如在一篇文章中我看到了这个测试代码：

import React from 'react';
import {shallow} from 'enzyme';
import ProductList from './ProductList';

it('should render a list of products as an unordered list', () => {
  const mockProducts = [
    {id: 1, name: 'Mock Product 1', brand: 'MockBrandA'},
    {id: 2, name: 'Mock Product 2', brand: 'MockBrandB'},
    {id: 3, name: 'Mock Product 3', brand: 'MockBrandC'},
  ];
  const wrapper = shallow(<ProductList products={mockProducts}/>);
  expect(wrapper.find('li').length).toEqual(mockProducts.length);
  // 3
});

这是一个测试 ul/li 列表组件的简单代码，它将返回 3 ，因为我们在 mockProducts 数组中有 3 个项目。

所以我真的很困惑！！！

真的为什么我们要检查这段代码？！

每次编辑后程序员都会在浏览器中检查结果，那么我们为什么要编写这个测试并且它是必不可少的？！

例如，如果我写了这段代码，当我保存代码时，我会在浏览器中检查结果，我会查看结果，我知道这没问题，这没有错误，那么为什么我还要为简单的组件编写测试代码？

它只是 CI 工具和调试过程必不可少的，还是一种不同的方法？或者也许只是为了知道构建秒数和检查构建时间是必不可少的？！

谢谢

Answer 1

我在某个时候正好站在你的立场上，你可以阅读单元测试，但你仍然不明白为什么以及如何知道你应该测试什么。如果是这种情况，我会尝试解释我所学到的。

好处

肯定测试一个呈现 3 的组件<li>听起来很傻。当您的代码库增长并且您有数百个组件时，或者当您的应用程序有 6 个模块、10 个表单和 7 个列表屏幕时；想象一下，您需要多长时间才能确保对代码库所做的每一个小改动都能正常工作。您添加了 1 行代码，并且必须手动测试所有内容？一定不行。

通过自动测试，测试程序将为您完成。您可以添加 1 行代码并运行测试。您可以修改现有实现并重新运行以查看是否一切正常。

基本上它为您提供快速回归测试；您不需要让 QA 人员点击所有按钮来查看您所做的每次提交是否有任何问题，但测试套件会为您完成，并且会快速完成。

要测试什么？

更简单的答案是测试特定输入的输出。用“业务”的话来说，就是测试规范。例如，如果您的组件收到 2 个 props:hasError和products，则您有 3 个测试：

1. 它呈现的错误消息，但没有produc列表中，当hasError 是true
2. 它在products有项目时呈现 3 个产品，并且hasError是false
3. 当products数组为空时，它会呈现一条消息，指定尚无产品。

因此，对于每个可能的输入，您添加一个测试来检查输出是否正是您所期望的。

结论

当您的应用程序中拥有大量组件和大量模块时，您将了解其好处。测试是您只能通过练习才能更好地理解并变得更好的事情之一。通过扩展，您必须投入时间编写测试，即使它们感觉“愚蠢”或“不必要”。你最终会看到好处；所有成功的大型科技公司都进行测试自动化是有原因的，它有效。