我应该在 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 行代码并运行测试。您可以修改现有实现并重新运行以查看一切是否仍然有效。

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

要测试什么？

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

1. 当hasError 为true 时，它会呈现错误消息但不呈现产品列表
2. 当products 有物品并且hasError 是false 时，它会呈现3 个产品
3. 当products 数组为空时，它会呈现一条消息，指出还没有产品。

因此，对于每个可能的输入，您添加一个测试，以检查输出是否完全符合您的预期。

结论

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