简介
enzyme-matchers 是一个 Jest 和 Enzyme 的插件，它在测试 React 组件时提供了一些常用的匹配器，使得测试更加容易和高效。
这个插件可以帮助你针对 React 组件编写可靠的测试，帮助你减少错误和提高工作效率，其 API 简单易用，非常适合前端开发人员。
本文将详细介绍 enzyme-matchers 的使用方法和示例，帮助你学习和掌握这个插件。
安装
首先，你需要使用以下命令来安装 enzyme-matchers：
npm install --save-dev enzyme-matchers
安装完成后，你需要在 Jest 的配置文件中配置 enzyme-matchers。在 Jest 的配置文件中添加以下内容：
-- -------------------- ---- ------- ------ - --------- - ---- --------- ------ ------- ---- -------------------------- ------ - ---------------- - ---- ----------------- ------ - -------- - ---- ------------------ ----------- -------- --- --------- --- ----------------------------------------------- ----- ------ ---- ------------------------
使用
使用 enzyme-matchers，你只需要在测试中使用 Jest 的 expect 方法，并在该方法中使用相应的匹配器。
下面是一些常用的 enzyme-matchers 匹配器：
toBeChecked()
检查一个输入组件是否被选中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
---------- ------ --- -------- -- --------- -- -- -
----- ------- - -------------------- -------------- ----
------------------------------------------------------------
---
---------- ------ --- -------- -- ----------- -- -- -
----- ------- - -------------------- --------------- ----
----------------------------------------------------------------
---
---toContainReact()
检查一个组件是否包含某个 React 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
------ ---------------- ---- ---------------------
---------------------- ---- -- -- -
---------- ------ --- ----- ----------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------ ----
---
---toHaveClassName(className)
检查一个组件是否有特定的 className。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
---------- ---- --- ----- ------- -- -- -
----- ------- - -------------------- ----
---------------------------------------
---
---toHaveDisplayName(componentName)
检查一个组件是否有特定的 displayName。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
---------- ---- - ----------- -- --------------- -- -- -
----- ------- - -------------------- ----
-------------------------------------------------
---
---toHaveProp(propName, [propValue])
检查一个组件是否有特定的 prop，并可以验证 prop 的值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
---------- ---- --- ---- ----- ---- - ----- -- ------- -- -- -
----- ------- - -------------------- --------- ----
--------------------------------- -------
---
---toHaveState(stateName, [stateValue])
检查一个组件是否有特定的 state，并可以验证 state 的值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
---------- ---- --- ----- ----- ---- - ----- -- ------- -- -- -
----- ------- - ------------------ ----
------------------ ---- ----- ---
---------------------------------- -------
---
---toMatchSelector(selector)
检查一个组件是否能够匹配指定的 CSS 选择器。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
---------------------- ---- -- -- -
---------- ----- --- -------- ------------- -- -- -
----- ------- - ------------------ ----
---------------------------------------------
---
---结论
enzyme-matchers 是一个非常好用的 Jest 和 Enzyme 插件，可以帮助你在测试 React 组件时更加高效和可靠。本文介绍了常用的 enzyme-matchers 匹配器和用法，希望可以帮助你学习和掌握这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad4cb5cbfe1ea0610c35