代码之家 › 专栏 › 技术社区 › Mohammad

我应该在ReactJs应用程序中测试什么?[闭门]

jestjs chai mocha.js unit-testing reactjs

Mohammad · 技术社区 · 8 年前

我开始学习更好的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工具和调试过程的必要条件,还是另一种方法?或者仅仅为了知道构建秒数和检查构建时间就很重要?!

谢谢

1 回复 | 直到 8 年前

Community Mohan Dere 6 年前

我就站在某个点上,你可以阅读单元测试,但你仍然不明白为什么以及如何知道你应该测试什么。如果是这样的话,我会尽力解释我学到了什么。

好处

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

通过自动测试,测试程序将为您完成这项工作。您可以添加一行代码并运行测试。您可以修改现有的实现,然后重新运行,看看是否一切正常。

基本上,它提供了快速回归测试;你不需要让一个QA人员点击所有的按钮来查看你所做的每一个承诺是否有任何中断,但是测试套件会帮你完成,而且会很快完成。

测试什么?

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

当出现以下情况时,它会显示错误消息,但不会显示产品列表 哈斯洛尔 是 true
当 产品 有个项目,和 哈斯洛尔 是 false
当出现以下情况时,它会呈现一条消息,指明还没有产品 产品 数组为空。

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

结论

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