福利

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人点击所有按钮，看看你做的每个提交是否有任何中断，但是测试套件会为你做，并且会快速完成。

测试什么？

更简单的答案是测试特定输入的输出。在＆＃34; business＆＃34;单词，测试规范。例如，如果您的组件收到2个道具：hasError和products，则您有3个测试：

当hasError为true
当products有项目时，它会呈现3个产品，hasError为false
当products数组为空时，它会显示一条消息，指出还没有产品。

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

结论

当您拥有大量组件以及应用中的大量模块时，您将了解这些好处。测试是你只能通过练习才能更好地理解和变得更好的事情之一。通过扩展，你必须投入时间编写测试，即使他们感到愚蠢＆＃34;或者＆＃34;不必要的＆＃34;。你最终会看到好处;所有大型成功的科技公司都会进行自动化测试，这是有道理的。

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

1 个答案:

福利

测试什么？

结论