React 组件在前端开发中扮演着重要的角色，而测试是保证组件稳定性和可靠性的重要措施。在开发过程中，经常需要使用第三方组件，那么如何对第三方组件进行测试呢？这篇文章将介绍使用 Jest + Enzyme 在测试第三方 React 组件中的方法和技巧。
Jest 简介
Jest 是 Facebook 出品的一款开源测试框架，使用 Jest 可以轻松地编写测试代码，其使用的语法类似于 Jasmine。Jest 提供了基础的测试环境和运行测试的配置。同时，Jest 还配备了 Mock 测试框架，以及Snapshot 测试等功能，使得测试更加方便快捷。
Enzyme 简介
Enzyme 是一款由 Airbnb 出品的 React 组件测试工具，使用 Enzyme 可以方便地对 React 组件进行测试和操作。其提供了深度渲染和浅度渲染两种方式，以及 API 查询，事件模拟等功能，方便测试人员进行集成测试。
第三方组件测试
在测试第三方组件之前，首先需要了解第三方组件是如何使用的，即引用方式是什么。通常，第三方组件的使用方式有两种，一种是通过 ES6 方式引入，一种是通过 CommonJS 方式引入。在这里，我们演示一下 ES6 方式的使用方式。
引入第三方组件
- 安装第三方组件
$ npm install rc-slider --save-dev
- 引入组件
import React, { Component } from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';在这里我们将使用 rc-slider 组件进行测试，测试其是否能正确渲染并且与预期一致。
测试组件
- 初始化测试环境，安装相关库：
$ npm install --save-dev enzyme enzyme-adapter-react-16 jest
-- -------------------- ---- ------- ------------- ------ - -------- --------- - ---- --------- ------ ------- ---- -------------------------- ------ ------ - --------- - ---- -------- ------ ------ ---- ------------ ------ ----------------------------- ----------- -------- --- --------- --- ----- ------- - --------------- ----
- 浅度渲染测试
在测试 rc-slider 组件时，使用浅度渲染方式，检查组件是否符合预期。
-- -------------------- ---- -------
------------------- --------- ------ -- -- -
---------- ------ ----------- -- -- -
----------------------------------
---
---------- ------ --- ------- ----- ------ -- -- -
----------------------------------------------------------
---
--在这个例子中，我们使用了 Enzyme 的 find 方法层层查找到需要的标签，如果标签存在，则测试通过。通过这个例子可以看到，使用 Enzyme 进行浅度测试非常方便。
- 深度渲染测试
深度渲染指的是当渲染组件时，同时也会渲染其子组件。在使用 Enzyme 进行深度渲染时，可以使用 mount 方法。
-- -------------------- ---- -------
------------------- --------- ------ -- -- -
---------- ------ ----------- -- -- -
----------------------------------
---
---------- ------ --- ------- ----- ------ -- -- -
----------------------------------------------------------
---
---------- ------- -- -------- -- -- -
----- --------- - ------------- ----
-------------------------- -----
------------------------------------------
---
--在深度渲染测试中，我们对 rc-slider 组件设置了 props，并通过 state 判断是否改变，从而判断是否测试通过。我们可以看到，使用 Enzyme 进行深度渲染测试同样非常方便。
结论
在这篇文章中，我们简单介绍了使用 Jest + Enzyme 测试第三方 React 组件的方法和技巧。Jest 提供了基础的测试环境和配置，而 Enzyme 则提供了深度渲染和浅度渲染等方便测试的 API，通过这些方式，我们可以轻松完成第三方组件的测试，保证组件的稳定性和可靠性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a9c28a1ce006354973abe