React组件测试

前言：有了前面Jest和Enzyme基础知识的储备，接下来，我们看如何在项目中测试组件。

一.测什么和如何测？

当我们看到一个组件时，首要考虑测试什么？然后才是如何测试。作为一个通用的测试原则，我是基于这几个方面进行考虑。

下面所有测试代码，都是针对TodoList这个示例demo，界面如下：

功能说明：在Add Todo这个input框中输入内容，点击回车时，内容添加到正在进行这个列表中，同时还要进行个数统计，并且清空input框。

• 组件节点测试
  其实就是只关注render函数中，组件的渲染情况就可以了。
  
  上面的render函数是有输入框的Header组件，接下来我们根据渲染，编写测试用例。
  
  虽然测试用例测试的方面，组件渲染出来时，我们一眼就能看出来，是否满足需求，但还是建议编写测试代码。因为，当我们项目非常庞大时，很可能在不经意间修改了代码，比如修改了placeholder，我们可能不容易发现这种修改，这时候，测试用例就会不通过，除非我们真的想要改变placeholder，此时，可以修改测试用例，让测试通过。这样，就可以很好的避免误修改。

• 交互测试
  主要是利用simulate()函数模拟事件，实际上simulate是通过触发事件绑定函数，来模拟事件的触发。触发事件后，去判断props上特定函数是否被调用，传参是否正确&