三种渲染方式
enzyme支持三种方式的渲染：
-
shallow：浅渲染，是对官方的Shallow Renderer的封装。将组件渲染成虚拟DOM对象，只会渲染第一层，子组件将不会被渲染出来，因而效率非常高。不需要DOM环境， 并可以使用jQuery的方式访问组件的信息；
-
render：静态渲染，它将React组件渲染成静态的HTML字符串，然后使用Cheerio这个库解析这段字符串，并返回一个Cheerio的实例对象，可以用来分析组件的html结构。
-
mount：完全渲染，它将组件渲染加载成一个真实的DOM节点，用来测试DOM API的交互和组件的生命周期，用到了jsdom来模拟浏览器环境。
shallow
shallow 在单元测试的过程中，浅渲染将一个组件渲染成虚拟DOM对象，并不会渲染其内部的子组件，也不是真正完整的React Render,无法与子组件互动。
shallow(node[, options]) => ShallowWrapper
参数
- node (ReactElement): 要渲染的组件
- options (Object [optional]):
- options.context: (Object [optional]): 要传递到组件的上下文
返回
ShallowWrapper: 在渲染输出后，返回浅渲染ShallowWrapper实例
.at(index) => ShallowWrapper
返回当前索引的的节点到 wrapper 在当前包装器的给定索引处返回节点周围的包装器。
参数
index (Number): 从0开始的整数，来选择取回的第几个节点
返回
ShallowWrapper
例子
const wrapper = shallow(<MyComponent />);
expect(wrapper.find(Foo).at(0).props().foo).to.equal("bar");
类似方法 .get(index) => ReactElement
更多中文版本API可看参考链接2
常用函数
- simulate(event, mock)：用来模拟事件触发，event为事件名称，mock为一个event object；
- instance()：返回测试组件的实例；
- find(selector)：根据选择器查找节点，selector可以是CSS中的选择器，也可以是组件的构造函数，以及组件的display name等；
- at(index)：返回一个渲染过的对象；
- get(index)：返回一个react node，要测试它，需要重新渲染；
- contains(nodeOrNodes)：当前对象是否包含参数重点 node，参数类型为react对象或对象数组；
- text()：返回当前组件的文本内容；
- html()： 返回当前组件的HTML代码形式；
- props()：返回根组件的所有属性；
- prop(key)：返回根组件的指定属性；
- state()：返回根组件的状态；
- setState(nextState)：设置根组件的状态；
- setProps(nextProps)：设置根组件的属性；
