前言
在前端开发中，测试是非常重要的一环，它可以有效的保证我们开发的代码质量和代码稳定性。在测试中，往往需要使用到一些工具和库，jest-enzyme-matchers就是其中之一。它是基于 Jest 和 Enzyme 的扩展库，可以帮助我们更方便的编写测试用例和进行断言检查，本文将针对其使用方法和实例进行详细讲解。
安装
要使用 jest-enzyme-matchers，首先需要安装 Jest 和 Enzyme。可以通过以下命令来安装：
--- ------- ---------- ---- ------
然后，再通过以下命令来安装 jest-enzyme-matchers:
--- ------- ---------- --------------------
配置
在安装完成后，需要对 Jest 进行配置，让其能够识别和使用 jest-enzyme-matchers。可以在 package.json 文件中添加以下配置：
------- -
--------------------- -
----------------------
--
---------------------- -
---------------------------
-
-其中，"setupFilesAfterEnv" 指定了在执行测试前需要加载的模块，这里就是 jest-enzyme-matchers，类似于设置 Jest 的 setupTestFrameworkScriptFile 配置项。"snapshotSerializers" 是让 Jest 能够识别使用 Enzyme 渲染的组件，要使用此配置需要先安装 enzyme-to-json。
使用方法
安装和配置以后就可以在测试代码中使用 jest-enzyme-matchers 提供的断言了。这里我们将以一个 React 组件为例进行讲解，代码如下：
------ ----- ---- --------
------ - ------- - ---- ---------
----- ----------- - -- ---- -- -- -
-----
---------- ------------
------
--
------ ------- ------------包含某个元素
有时候我们需要判断某个元素是否存在于组件中，此时可以使用 "toContainReact" 断言。以下代码就是测试 MyComponent 是否包含一个 h1 元素：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----- ------- - -------------------- ------------ ----
---------- ------- -- -- --------- -- -- -
----------------------------------------- -------------
---
---若 MyComponent 中确实包含一个 h1 元素，则测试通过。
包含某个样式类
有时候我们需要判断某个元素是否包含某个样式类，此时可以使用 "toHaveClassName" 断言。以下代码就是测试 MyComponent 的 h1 元素是否包含 "my-class" 样式类：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----- ------- - -------------------- ------------ ----
---------- ---- ---------- ------- -- -- -
-------------------------------------------------------
---
---若 MyComponent 的 h1 元素确实包含 "my-class" 样式类，则测试通过。
属性匹配
有时候我们需要判断某个元素是否具有特定的属性，此时可以使用 "toHaveProp" 断言。以下代码就是测试 MyComponent 的 h1 元素是否具有 "id" 和 "className" 属性：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----- ------- - -------------------- ------------ ----
---------- ---- ----- --- ---- --- ------------- -- -- -
--------------------------------------------
---------------------------------------------------
---
---若 MyComponent 的 h1 元素确实具有 "id" 和 "className" 属性，则测试通过。
快照比较
有时候我们需要判断组件渲染后的结果是否与预期一致，此时可以使用"toMatchSnapshot"断言。以下代码就是测试 MyComponent 渲染后是否与预期一致：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ------------ ----
----------------------------------
---
---若 MyComponent 渲染后与预期一致，则测试通过。
总结
Jest-enzyme-matchers 是 Jest 和 Enzyme 的扩展库，可以帮助我们更方便的编写测试用例和进行断言检查。本文通过实例讲解了它的使用方法和实现，希望读者可以通过本文的学习，能够更熟练的掌握 Jest 和 Enzyme 的使用技巧，提升测试代码的编写效率和质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600556c081e8991b448d38bc