在文章中我们介绍了什么是单元测试以及单元测试框架Jest的基本用法。在本文中我们会具体聊聊如何用Jest为React组件编写单元测试。首先我们要明确的一点，那就是React组件的单元测试本质是也是单元测试。因此它也符合我们之前介绍过的单元测试的全部特点。唯一不同的地方在于React组件的单元测试中我们需要找到合适的方法对执行结果进行断言。换言之，我们要根据React的特点来设置代码是否正确执行的判断条件。那么React组件和其它的被测试对象有何不同呢？仔细想过，我们会发现：React组件的render结果是一个组件树，并且整个树最终会被解析成一个纯粹由HTML元素构成的树形结构React组件可以拥有state，且state的变化会影响render结果React组件可以拥有生命周期函数，这些生命周期函数会在特定时间点执行知道了要测试的内容，接下来的问题就是如何执行一个React组件并编写断言了。如何执行一个React组件呢？看到这个问题估计大多数儿人是蒙的。平时不就是直接ReactDOM.render吗？不错，ReactDOM.render确实可以执行一个React组件并将它渲染到页面中，但这种方式不利于编写测试代码。有没有更简单的方式呢？其实React已经帮我们提供好了工具，让我们一起来看看。React提供的测试工具在React的官方文档中提到了两个用于测试React组件的库。让我们分别介绍。react-test-renderer在说react-test-renderer之前，让我们先聊聊什么是renderer。React最早是被用来开发网页的，所以早期的React库中还包含了大量和DOM相关的逻辑。后来React的设计思想慢慢被迁移到其它场景，最被人们熟知的莫过于ReactNative了。为了灵活性和扩展性，React的代码被分拆为React核心代码与各种renderer。React自带了3个renderer，前两个是大家常见的：react-dom负责将组建渲染到浏览器页面中。react-native-renderer负责将组件渲染成原生场景中的各种“View”。而今天提到的react-test-renderer则负责将组件输出成JSON对象以方便我们遍历、断言或是进行snapshot测试。备注：这里有一份各种各样的renderer列表。react-dom/test-utils首先从名称可以看出这个库是包含在react-dom中的。所以它只是react-dom的辅助测试工具。在React文档站中它的介绍页上用的标题却只有“TestUtilities”两个单词，很容易让人产生误解。该库中的方法主要作用是帮我们遍历ReactDOM生成的DOM树，方便我们编写断言。注意：使用该库时必须提供一个DOM环境。当然这个DOM环境可以是jsdom这种模拟环境。(Jest默认的执行环境就是jsdom)如何选择？读到这你可能会问，react-test-renderer和react-dom/test-utils两者看起来还是很相似。何时该选择哪一个库呢？根据笔者实际使用经验，简单来说：react-test-renderer使用方法react-test-renderer在实际使用过程中又有两种用法：shallowrender：组件只会被render一层（children中的React组件不会被render）fullrender：组件会被完全render现在让我们通过例子来具体看看两种方式的差别。假设我们有以下两个组件：shallowrendershallowrender相关的工具类存在于react-test-renderer/shallow空间下，我们首先引入，并创建一个实例：ShallowRenderer的实例为我们提供了两个方法：让我们看看完整的例子：我们首先验证了Headerrender后顶层元素是一个div。接着在第二个用例中验证了render结果中包含3个Link组件的实例。由于shallowrender只render一层，所以可以验证的信息也都比较简单。比较适合验证组件输出的结构是否符合预期。fullrender接下来看看fullrender。首先引入工具库：调用TestRenderer的create方法并传入要render的组件就可以获得一个TestRenderer的实例。该实例上存在着以下几个方法和属性：.toJSON()：生成一个表示render结果的JSON对象。该对象中只包含像div（web平台）或是View（native平台）这样的原生节点。不会包含用户开发的组件的信息。适合用于snapshottesting。.toTree()：和.toJSON()类似，但信息更加丰富，包含了用户开发的组件的信息。.update(element)：通过传入一个新的元素来更新上次render得到的组件树。.umount()：umount组件树，同时触发相应的生命周期函数。.getInstance()：返回根节点对应的React组件实例，如果存在的话。如果顶级组件是一个函数式组件，则无法获取。.root：该属性保存了根节点对应的测试实例(testinstance)。该实例为我们提供了一系列方法方便我们编写断言。现在让我们看看测试实例上都有哪些方法和属性可供我们使用(完整列表请参考这里：.find()与.findAll()：用于查找符合特定条件的测试实例。区别在于.find()会严格要求节点树种只有1个满足条件的测试实例，如果没有或者多于1个就会抛出异常。此区别同样适用于下面两组方法。.findByType()与.findAllByType：用于查找特定类型的测试实例。这里的类型可以是div这种原生类型，也可以是Link这种用户编写的React组件。.findByProps()与.findAllByProps()：用于查找props符合特定结构的测试实例。.instance：该测试实例对应的React组件实例。现在让我们看一个完整的测试用例：在这个用例中我们通过.find()方法查找了className为my-link的a标签并确保找到了3个。react-dom/test-utils使用方法现在让我们来看看涉及到用户交互的组件如何编写单元测试。首先简单了解一下react-dom/test-utils的基本用法。首先还是引入工具类：ReactTestUtils对象上我们通常会用到以下一些方法(完整方法列表请参考这里)：.Simulate.{evnentName}()：模拟在给定的DOM节点上触发特点事件。Simulate可以触发所有React支持的事件类型。renderIntoDocument()：把一个React组件render到一个detached的DOM中。注意：该方法依赖DOM环境。不过不用担心，Jest默认集成了jsdom。该方法会返回被render的React组件的实例。scryRenderedDOMComponentsWithClass()与findRenderedDOMComponentWithClass()：查找匹配特定类名的DOM元素。区别在于scryRenderedDOMComponentsWithClass()会查找所有元素。而findRenderedDOMComponentWithClass()会假定页面中有且只有1个符合条件的元素，否则抛出异常。scryRenderedDOMComponentsWithTag()与findRenderedDOMComponentWithTag()：查找匹配特定标签类型的DOM元素。还是让我们通过一个具体的组件来熟悉下实际用法。假设我们有以下Button组件：其主要功能就是点击button元素时执行onClick回调，并且设置了自上一次点击之后，毫秒内按钮进入禁用状态。首先让我们测试一下执行onClick回调这个逻辑：这里我们创建了一个mock方法onClickMock并将它作为回到函数传递给Button组件。然后利用ReactTestUtils.Simulate.click模拟触发点击事件。最后确认一下onClickMock被调用。注：关于mock方法的使用，在文章中有详细介绍，欢迎阅读。接下来让我们测试一下点击过后毫秒内进入禁用状态：由于涉及到定时器逻辑，我们在这个用例中使用了Jest提供的timermock功能。详细用法请参考Jest官方文档。Enzyme前面已经介绍完了React自带的两个测试工具库。接下来简单介绍一下由Airbnb开源的React测试工具库Enzyme。Enzyme底层其实也是基于react-test-renderer和react-dom/test-utils的。但它在二者的基础上进行了封装提供了更加简单易用的查询、断言方法。在概念上，Enzyme也与二者非常相似。在Enzyme中有三种render模式：ShallowRendering对应react-test-renderer/shallowFullDOMRendering对应react-dom/test-utilsStaticRendering对应react-test-renderer如果你能理解前面对react-test-renderer和react-dom/test-utils的介绍，那么上手Enzyme应该是非常容易的。此处不再详细介绍Enzyme的使用方法。让我们使用Enzyme改写一下前面为Button组件编写的测试：现在我们可以通过Enzyme提供的.find()方法查找DOM节点，通过.state()方法读取state。简单不少吧。写在最后本文简单介绍了react-test-renderer和react-dom/test-utils两兄弟以及Enzyme。具体在项目中选择哪一款工具根据自己喜好选择即可。
转载请注明：http://www.aierlanlan.com/rzgz/7358.html
