[React] 测试模块enzyme

前言：

本文参照官方文档进行逐步个人看法和分析
github: GitHub - enzymejs/enzyme: JavaScript Testing utilities for React

在单元测试中，我们希望去监测我们的页面是否可以被渲染，或者渲染的结果，我们可以使用react的模块 Enyme 中的三种渲染方式： shallow， mount，render。

三种渲染中最为推荐使用mount渲染进行测试，因为它可以测试所有内容，包括互相操作，是三者里面最强的一个渲染操作。当然，在某些情况，mount是不能够使用的。

1. shallow

Shallow Rendering （浅渲染），Shallow Rendering · Enzyme

官方的说明为：

浅层渲染可以只渲染组件的“第一层”，并且对组件的 render 方法的返回值进行断言，不必担心子组件的行为，子组件并没有实例化或被渲染。并且浅层渲染不依赖 DOM。

也就是说仅仅在表层，将所有的属性都赋值进去，但是无法获取动态的信息，即子组件的变化。

浅层测试（Shallow testing）目前有些局限性，即不支持 refs。

 这个就特别体现出浅，即使我一开始没有任何行为，你是什么属性就是什么属性，你后面会有什么动态变化之类的，我无法获取，像refs中的值一样，无法获取更新的值。简单而已就是将值放进去打印了，虚拟DOM并没有创建，导致无法动态互动。

2.mount

深层渲染，Full DOM Rendering · Enzyme

它会进行完整渲染，会渲染当前组件以及所有子组件，渲染的结果和浏览器渲染结果是一样的。’

需要引入一个浏览器

3.render

render静态渲染，主要用于将React组件渲染成静态的HTML字符串，然后使用Cheerio这个库解析这段字符串，并返回一个Cheerio的实例对象，可以用来分析组件的html结构。

需要注意的是，如果使用了 ref = this.state.xxx 这种属性时，是无法使用mount渲染的，因为每次渲染都需要对应的值是 string 或者是 class。当然可以修改ref， 但是这对于你需要做实时操作返回时是无法实现的，

比如聚焦，在一个页面中关闭一个按钮然后聚焦前一个页面的某一个控件。（案例后期补充），这种需要使用 ref ，那么此时是无法直接渲染的，渲染也会报错

渲染方法	是否可以测试子组件	是否可以模拟交互
shallow	否	是
mount	是	是
render	是	否