在 React 开发中，我们经常需要测试项目中的组件。而 Enzyme 是一个非常优秀的 React 组件测试工具，让我们能够轻松地编写和运行单元测试以确保组件的正确性。
在真实的项目中，很多组件都有多种不同的状态，这些状态可能会对组件的显示和交互产生不同的效果。在这种情况下，我们该如何使用 Enzyme 来更好地测试组件的多个状态呢？接下来，我们将详细探讨这个问题。
Enzyme 文档回顾
在深入探讨如何使用 Enzyme 处理多个组件状态之前，我们需要先了解一些基础概念。
首先，我们需要知道 Enzyme 支持三种不同的渲染方法：shallow()、mount() 和 render()。常用的是前两种：
shallow()：浅渲染，只渲染组件的第一层子组件，并且不会执行子组件的生命周期方法。这种方法适合于单元测试，因为它会快速而准确地测试组件的交互和呈现逻辑。mount()：深渲染，会完全渲染组件及其子组件，执行所有生命周期方法，完成组件的挂载。这种方法适合于集成测试，因为它允许我们测试组件与应用程序之间的交互。
另外，我们还需要了解 Enzyme 支持以下的几个选择器：
find()：查找符合条件的所有子元素。first()、last()、at()：获取元素数组中的第一个、最后一个或指定索引的元素。filter()：根据条件筛选元素。contains()：检查是否包含指定的子元素。
最后，我们也需要知道 Enzyme 提供了一些非常实用的测试断言方法。这些方法可以帮助我们检查组件的状态、属性和输出等情况：
expect(wrapper).to.have.length(num)：断言渲染后的元素数量为num。expect(wrapper).to.have.className(className)：断言元素是否具有指定的 CSS 类名。expect(wrapper).to.have.prop(propName, propValue)：断言元素是否具有指定的属性名和属性值。expect(wrapper).to.have.state(stateName, stateValue)：断言元素是否具有指定的状态名和状态值。expect(wrapper).to.have.text(text)：断言元素是否正确渲染了指定的文本内容。
处理多个组件状态
实际上，在组件开发中，有大量的事情可以通过测试状态来验证。下面，我们将通过一个简单的组件示例来演示如何使用 Enzyme 测试多个组件状态。
假设我们正在开发一个登录页面，并有一个如下所示的表单组件：
-- -------------------- ---- -------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - - --------- --- --------- -- --
-
-------------------- - ------- -- -
--------------- --------- ------------------ ---
--
-------------------- - ------- -- -
--------------- --------- ------------------ ---
--
------------ - ------- -- -
-----------------------
-- --------
--
-------- -
------ -
----- -----------------------------
-------
----
------ ----------- --------------------------- ------------------------------------ --
--------
-------
---
------ --------------- --------------------------- ------------------------------------ --
--------
------ ------------- ---------- --
-------
--
-
-在这个组件中，我们有两个输入框，分别用来输入用户名和密码。用户输入内容后，我们将其存储在组件的状态中，并在表单提交时将其发送到服务器进行身份验证。
现在，在编写单元测试时，我们该如何测试该组件的多个状态呢？
测试组件初始状态
首先，我们需要测试组件初始状态。因为 LoginForm 组件的构造函数中初始化了 username 和 password 状态，所以我们需要使用 shallow() 方法来创建组件实例，然后使用 find() 选择器根据 label 和 input 元素的 className 进行断言，以确保这些元素正确包含在组件中：
-- -------------------- ---- -------
------ ------ ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
-------------------- ---- -- -- -
----------- ------- ------- -- -- -
----- ------- - ------------------ ----
---------------------------------------------------------------------
------------------------------------------------------------------ ----
--------------------------------------------------------------------
------------------------------------------------------------------ ----
------------------------------------------------------------------ ------
---
---测试组件用户交互
接下来，我们需要测试组件在用户交互（即输入用户名和密码并提交表单）时的状态。因为我们需要使用用户的输入来执行一些操作，所以我们需要使用 mount() 方法来渲染组件并执行交互动作。
在这个例子中，我们将模拟用户输入 username 和 password 的字符串，然后模拟对提交按钮的点击。最后，我们将断言组件状态和输出是否正确：
-- -------------------- ---- ------- ----------- --- ---- ---- ----------- -- -- - ----- ------- - ---------------- ---- -------------------------------------------------- - ------- - ------ ---------- - --- ------------------------------------------------------------- ------------ -------------------------------------------------- - ------- - ------ ---------- - --- ------------------------------------------------------------- ------------ ---------------------------------------------- - ---------------- -- --- --------------------------------------------------- -------- ----------- ---
测试组件错误状态
最后，我们需要测试组件在出现错误时的状态。例如，当用户输入无效的用户名或密码时，表单可能会验证失败，我们需要通过展示错误来提示用户。
在这种情况下，我们需要模拟表单提交时出现错误，并断言输出结果是否正确：
it('displays error message when login fails', () => {
const wrapper = mount(<LoginForm />);
wrapper.setState({ username: 'TestUser', password: 'TestIncorrectPass' });
wrapper.find('.login-form').simulate('submit', { preventDefault() {} });
expect(wrapper.find('.output').text()).to.equal('登录失败');
});总结
在我们的示例中，我们使用了 Enzyme 的多种选择器和测试断言方法，测试了 LoginForm 组件的多个状态。通过深入理解这些概念和方法，我们可以更好地使用 Enzyme 来测试我们的 React 组件库中的多个状态，从而确保其正确性和稳定性。
在你的代码中使用 Enzyme 进行测试可以大大减少开发阶段和项目维护的难度，这使得它成为前端开发过程中不可或缺的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647dd5a1968c7c53b08a5cb0