您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　8.2.3 辅助工具

　　特定于React和Redux的单元测试，还需要几个辅助类。

　　1.Enzyme

　　要方便地测试React组件，就需要用到Enzyme，有意思的是Enzyme并不是Facebook出品，而是AirBnB贡献出来的开源项目。

　　要使用Enzyme，需要安装对应的npm包：

　　npm install —save-dev enzyme react-addons-test-utils

　　上面的react-addons-test-utils是Facebook提供的单元测试辅助库，Enzyme依赖这个库，但是这个库的本身功能没有Enzyme那么强大。

　　测试React组件，需要将React组件渲染出来看一看结果，不过Enzyme认为并不是所有的测试过程都需要把React组件的DOM树都渲染出来，尤其对于包含复杂子组件的React组件，如果深入渲染整个DOM树，那就要渲染所有子组件，可是子组件可能会有其他依赖关系，比如依赖于某个React Context值，为了渲染这样的子组件需要耗费很多精力准备测试环境，这种情况下啊，针对目标组件的测试只要让它渲染顶层组件就好了，不需要测试子组件。

　　Enzyme支持三种渲染方法：

　　·shallow，只渲染顶层React组件，不渲染子组件，适合只测试React组件的渲染行为；

　　·mount，渲染完整的React组件包括子组件，借助模拟的浏览器环境完成事件处理功能；

　　·render，渲染完整的React组件，但是只产生HTML，并不进行事件处理。

　　例如，对于Filter组件，代码如下：

　　const Filter = () => (

　　{FilterTypes.ALL}

　　{FilterTypes.COMPLETED}

　　{FilterTypes.UNCOMPLETED}

　　);

　　在测试Filter组件的时候，如果只专注于Filter的功能，只要保证这个渲染结果包含三个Filter组件就足够了，没有必要把Link组件内容渲染出来，因为那是Link组件的单元测试应该做的事情，Enzyme这种“浅层渲染”的方法叫shallow。

　　如果想要渲染完整的DOM树，甚至想要看看Link中的点击是否获得预期效果，可以选择Enzyme的方法mount，mount不光产生DOM树，还会加上所有组件的事件处理函数，可以模拟一个浏览器中的所有行为。

　　如果只想检查React组件渲染的完整HTML，不需要交互功能，可以使用Enzyme提供的render函数。

　　2.sinon.js

　　React和Redux已经尽量让单元测试面对的是纯函数，但是还是不能避免有些被测试的对象依赖于一些其他因素。比如，对于异步action对象，就会依赖于对API服务器的网络请求，毫无疑问在单元测试中不能真正地访问一个API服务器，所以需要模拟网络访问的结果。

　　开源社区存在很多模拟网络请求的单元测试辅助工具，不过对于“模拟”这件事，不应该只是局限于网络请求，所以这里我们使用一个全能的模拟工具sinon.js。

　　sinon.js功能强大，可以改变指定对象的行为，甚至改变测试环境的时钟设置。

　　为了使用sinons.js，需要如下安装对应的npm包：

　　npm install —save-dev sinon

　　3.redux-mock-store

　　虽然Redux简单易用，但是在某些情况下并不需要完整的Redux功能，一个模拟的Redux Store使用起来更加方便。比如对于测试一个异步action构造函数时，异步action构造函数会往Store中连续派发action对象，从测试角度并不需要action对象被派发到reducer中，只要能够检查action对象被派发就足够了，这样就能够用上redux-mock-store。

　　安装redux-mock-store的方法如下：

　　npm install —save-dev redux-mock-store 深入浅出React和Redux