在前端开发中，测试是不可或缺的一部分。使用 Enzyme 是一个流行的方法来测试 React 组件。但是，编写一次性测试可能会成为重复劳动，并且随着大型项目的增长，测试套件只会变得越来越复杂。因此，编写可重用的测试代码是非常必要的。
在本文中，我们将学习如何使用 Enzyme 编写可重用的测试代码，方便您的日常开发。
准备工作
在开始编写测试代码之前，您需要做以下准备工作：
安装依赖项
确保您的项目安装了以下依赖项：
react：您将测试的 React 组件。enzyme：用于测试 React 组件的 JavaScript 实用工具。enzyme-adapter-react-16：适配器，用于将 Enzyme 与 React 16 集成在一起。jest：测试框架和运行器。
创建测试工具类
创建一个测试工具类，其作用是为了封装 Enzyme API，并提供一组通用方法来测试 React 组件。
-- -------------------- ---- -------
------ - ---------- -------- ------ ------ - ---- ---------
------ ------- ---- --------------------------
----------- -------- --- --------- ---
------ ------- ----- ---------- -
------ ------------------ -
------ -------------
-
------ --------------- -
------ -----------
-
------ ----------- -
------ ------------
-
-在上面的代码中，我们通过 configure 方法将适配器与 Enzyme 集成。然后，我们创建了一个测试助手类，为不同的测试方法提供了快捷方式。
编写可重用的测试代码
现在，我们可以开始编写我们的可重用测试代码。我们将使用以下 React 组件作为我们的测试对象：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- ------
--
-
-------------- - -- -- -
--------------- -------- ------------------- ---
-
-------- -
----- - ----- - - -----------
------ -
-----
------ --------------- ------------------------------ ---------------------------- --
----------------------
------
--
-
-
------ ------- ---------以上代码为一个简单的复选框组件，它包含一个 label 属性。
接下来，我们将编写具有以下特点的可重用测试代码：
- 组件渲染（首次挂载）测试
- 组件状态更新测试
- 组件生命周期测试
组件渲染测试
第一个测试我们将检查当我们渲染 Checkbox 组件时是否可以找到其元素。
describe('<Checkbox />', () => {
it('should render the checkbox', () => {
const wrapper = TestHelper.shallowRender(<Checkbox label='test label' />);
expect(wrapper.find('input[type="checkbox"]')).toHaveLength(1);
});
});上面的代码首先尝试用 TestHelper 类的 shallowRender 方法渲染 Checkbox 组件。然后，我们使用 find 方法从 wrapper 中查找我们需要的元素，这里应该是一个 input[type="checkbox"] 类型的元素。
组件状态更新测试
下一个测试将检查用户单击复选框时 Checkbox 组件状态的变化。
-- -------------------- ---- -------
------------------- ---- -- -- -
---------- ------ -------- ----- -- ------- -- -- -
----- ------- - ---------------------------------- ----------- ------ ----
----- ----- - ---------------------------------------
-------------------------
--------------------------------------------
-------------------------
---------------------------------------------
---
---上面的代码中，我们首先使用 shallowRender 方法渲染 Checkbox 组件。接下来，我们查找 input 元素，并使用 simulate 方法模拟用户单击。最后，我们验证 Checkbox 组件的状态是否已更新。
组件生命周期测试
最后一个测试将检查 Checkbox 组件生命周期方法是否被调用。
-- -------------------- ---- -------
------------------- ---- -- -- -
---------- ---- ------------------- -- -- -
------------------------------ ---------------------
----- ------- - ---------------------------------- ----------- ------ ----
----------------------------------------------------------------------
---
---上面的代码中，我们首先使用 jest.spyOn 监听 componentDidMount 生命周期方法。接下来，我们使用 shallowRender 方法渲染 Checkbox 并断言 componentDidMount 的调用次数是否为一次。
通过上面的测试，我们可以在复杂项目中为其他组件编写可重用的测试代码，提高我们的测试效率。
结论
通过本文，我们学习了如何使用 Enzyme 编写可重用的测试代码，这些代码可以封装 Enzyme API，并提供一组通用方法来测试 React 组件。同时，我们也写了一些具体的测试例子，希望可以帮助您的日常开发工作。
不要忘记，在开发过程中测试对于您的代码质量至关重要，希望您在开发时注重测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675165848bd460d3ad895060