我应该在 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 列表组件的简单代码，这将 return 3 ，因为我们在 mockProducts 数组中有 3 个项目。

所以我真的很困惑!!!

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

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

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

这只是 CI 工具和调试过程所必需的，还是另一种方法？或者也许它只是了解构建秒数和检查构建时间所必需的？！

谢谢

Answer 1

我在某些时候正是你所站的位置，你可以阅读单元测试，但你仍然不明白为什么以及你怎么知道你应该测试什么。如果是这种情况，我将尝试解释我学到的东西。

好处

当然测试渲染 3 <li> 的组件听起来很愚蠢。当你的代码库增长并且你有数百个组件时，或者当你的应用程序有 6 个模块、10 个表单和 7 个列表屏幕时；想象一下，对于您对代码库所做的每一个小改动，您需要多长时间才能确保一切正常。您添加 1 行代码，您必须手动测试所有内容？地狱号

通过自动测试，测试程序会为您完成。您可以添加 1 行代码和运行测试。您可以修改现有的实现并重新运行看看是否一切仍然有效。

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

要测试什么？

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

当 hasError 为 true
它在 products 有项目时呈现 3 个产品，并且 hasError 是 false
当 products 数组为空时，它会显示一条消息，说明还没有产品。

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

结论

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

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

What should I test in ReactJs applications?

unit-testing

mocha.js

chai

reactjs

jestjs

好处

要测试什么？

结论