什么是 npm 包 expect-enzyme
expect-enzyme 是一个用于 Jest 和 Enzyme 的断言库，它提供了许多便捷的检查器来检查 DOM 和 React 组件的状态和属性。使用它可以非常方便地编写测试案例以确保代码质量。
expect-enzyme 安装
- 安装 Jest 和 Enzyme
expect-enzyme 依赖 Jest 和 Enzyme，因此我们需要先安装这两个包。可以使用 npm 或 yarn 来进行安装。
npm install jest enzyme enzyme-adapter-react-16 --save-dev 或 yarn add jest enzyme enzyme-adapter-react-16 --dev
- 安装 expect-enzyme
安装 expect-enzyme 只需要执行下面的命令即可。
npm install expect-enzyme --save-dev 或 yarn add expect-enzyme --dev
expect-enzyme 的使用
我们来看一个简单的例子，假设我们有这样一个组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
----- - -
------ --
--
--------- - -- -- -
----------------------- -- --
------ --------------- - --
----
--
--------- - -- -- -
----------------------- -- --
------ --------------- - --
----
--
-------- -
------ -
-----
------------ -----------------------
------- -------------------------------------------
------- -------------------------------------------
------
--
-
-
------ ------- --------我们要编写一个测试用例来测试这个组件的行为，那么可以这样写：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------- - ---- ---------
------ ------- ---- ------------
------ ------ ---- -----------------
------ - ---------------- - ---- -----------------
----------------------------------------------- ----- ------ ----
----------------- ----------- -- -- -
---------- --------- --- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- --------------- - -----------------------------
----------------------------------
----- ------ - -----------------------
----- -------- - --
---------------------------------
---
---------- --------- --- ----- ---- --- --------- ------ -- --------- -- -- -
----- ------- - -------------- ----
----- --------------- - -----------------------------
----------------------------------
----- ------ - -----------------------
----- -------- - ---
---------------------------------
---
---------- ------ ----------- -- -- -
----- ------- - ---------------- ----
------------------------------------------
---
---在这段代码中，我们首先引入了一些必要的包，然后定义了一个测试套件。这个套件包含三个测试用例，每个测试用例都测试了 Counter 组件的不同行为。
在每个测试用例的中间，我们先创建了一个组件的渲染 wrapper 对象，然后通过此对象查找相应的按钮，模拟点击事件，最后检查状态是否符合预期。
我们也可以使用 expect-enzyme 提供的更多断言函数来完成更多检查需求。例如，我们可以使用 toHaveClassName 检查组件是否包含某个类名：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
---------- ---- - --------- -- ----------- -- -- -
----- ------- - ---------------- ----
-------------------------------------------
---
---总结
expect-enzyme 提供了许多便捷的检查器来检查 DOM 和 React 组件的状态和属性，使用它可以非常方便地编写测试用例来确保代码质量。在使用它时，我们需要先安装 Jest 和 Enzyme，然后通过 npm 安装 expect-enzyme。了解了 expect-enzyme 的基本使用后，我们可以使用它来更好地测试我们的 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564f681e8991b448e1953
