在前端开发中，测试是非常重要的一环。React 应用程序的测试有多种方式，其中 Enzyme 是其中一个非常流行和实用的测试库。Enzyme 提供了一套简单易用、强大的 API，用于渲染组件、模拟交互和断言渲染结果，以测试 React 组件的行为和性能。本文将带领大家从头到尾学习如何使用 Enzyme 测试 React 应用程序的可用性。
准备工作
首先，我们需要安装必要的依赖库：
npm install enzyme react-test-renderer --save-dev
然后，我们需要配置 Enzyme，这样在测试文件中就可以愉快地使用它的 API。在测试文件的顶部添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import renderer from 'react-test-renderer';
Enzyme.configure({ adapter: new Adapter() });配置 Enzyme 后，就可以愉快地开始测试我们的 React 应用程序了。
测试组件的渲染结果
我们可以使用 Enzyme 提供的 .render() API，测试一个 React 组件是否已经正确渲染并呈现出我们期望的结果。如下是一个简单的组件：
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;我们可以写一个测试用例，测试组件渲染结果是否正确：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- -------------------------
------------------ -------- --- --------- ---
------------------ ----------- -- -- -
----------- --- ------- ------ -- -- -
----- ---- - ------
----- -------- - ----------------- ----------- ----
-------------------------------------------------- -----------
---
---解析：
.shallow()方法用于浅渲染测试组件。这意味着我们不必考虑组件的子组件，而只需测试组件自身的性能和正确性expect()方法用于断言渲染结果是与我们预期的相同的.toEqual()方法用于深度比较，确保渲染结果与预期值保持完全一致
测试交互行为
有时我们需要测试组件的交互行为，比如点击按钮后是否触发了某个事件。Enzyme 提供了一套模拟交互的 API，可以轻松地完成这些测试。如下是一个含有点击按钮的组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - --------- -----------
------
--
--
------ ------- --------我们可以写一个测试用例来测试点击按钮后计数器是否会加 1：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ ------- ---- ------------------------
------------------ -------- --- --------- ---
----------------- ----------- -- -- -
-------------- --- ----- ----- - ------ ------- -- -- -
----- ------- - ---------------- ----
--------------------------------------------- ------- - --------
-----------------------------------------
--------------------------------------------- ------- - --------
---
---解析：
.simulate()方法用于模拟用户行为，比如模拟点击某个元素expect()方法用于断言预期行为是否已经发生
测试组件的 state 和 props
Enzyme 还提供了一系列测试组件实例的 API，用于测试组件的内部状态和 props 属性。如下是一个含有 state 和 props 属性的组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------------- -
----- ----------- ----------- - ----------------
----- ------ -------- - ----------
----- -----------
------ -----------
---
----- ---------- - -- -- -
-----------------
--
----- ------------ - ------- -- -
----------------- -------------------- ---------------------
--
----- ------------ - ------- -- -
-----------------------
-------------------
------------------
--
-- ----------- -
------ -
----- ------------------------
-------
-----
------ ----------- ----------------- ----------- ----------------------- --
--------
-------
------
------ ------------ ------------------ ------------ ----------------------- --
--------
------- ---------------------------
-------
--
-
------ -
-----
-------- ---------------
--------- ----------------
------- ----------------------------------
------
--
-
------ ------- ---------我们可以写一个测试用例来测试组件 props 是否正确传递和组件 state 是否正确设置：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- -------------------------
------------------ -------- --- --------- ---
------------------ ----------- -- -- -
----------- --- ---- ---- ---- - --- ---- ---- -- ------ ---- -- -- -
----- ---- - -
----- ----- -----
------ ------------------
--
----- ------- - ----------------- --------- ----
----------------------------------------------------- ---------------
--------- - ----- -----
-----------------------
----------------------------------------------------- ---------------
---
-------- --- ----- ---- - --- ----- ----- -- ----------- -- -- -
----- ---- - -
----- ----- -----
------ ------------------
--
----- ------ - ----------
----- ------- - ----------------- --------- --------------- ----
-----------------------------------------------
---------------------------------------------- - ------- - ----- -------- ------ ------------------ - ---
--------------------------------------- - --------------- -- -- -- ---
------------------------------------- -------- ------ ------------------ ---
------------------------------------------------------ -------------------
------------------------------------------------------
---
---解析：
.setProps()方法用于设置组件 props.at(index)方法用于选择指定索引的组件.toHaveBeenCalledWith()方法用于断言某个方法是否被正确调用.simulate('change', { target: { name: 'email', value: 'john@example.com' } })方法用于模拟用户输入值并触发 state 的修改.simulate('submit', { preventDefault: () => {} })方法用于模拟表单的提交事件
结论
在这篇文章中，我们学习了如何使用 Enzyme 测试 React 应用程序的可用性。我们通过渲染组件、模拟交互和断言渲染结果来测试组件在不同情况下的正确性和性能。当然，在实际的 React 应用程序中，测试场景和需求是多种多样的，我们可以使用这些技巧和工具来完成更加全面的测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67013bee0bef792019b39845