在前端开发中，测试是至关重要的一环，能够帮助我们确保产品的质量并发现隐藏的问题。在 React 开发中，使用 Enzyme 来测试组件是一个很不错的选择。Enzyme 是一个 JavaScript 测试工具，由 Airbnb 开发，能够对 React 组件进行渲染和交互测试。
本文将从 Enzyme 的基础使用入手，并介绍如何逐步优化测试用例，打造更加全面、可靠的测试。
安装与引入
首先，需要安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
然后需要引入 Enzyme 和适应 React 16 的 Adapter：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });测试样例
在本文中，我们将以一个简单的组件为例进行测试，这个组件是一个计数器，有一个 count 的状态，并有两个按钮，分别用于增加和减少数字。它的代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
----- - -
------ -
--
--------------- - -- -- -
---------------- ----- -- -- -- ------ ----- - - ----
--
--------------- - -- -- -
---------------- ----- -- -- -- ------ ----- - - ----
--
-------- -
------ -
-----
--------- ----------------------
------- ------------------------------------------------
------- ------------------------------------------------
------
--
-
-
------ ------- --------下面就来具体讲解如何使用 Enzyme 进行测试。
测试组件渲染结果
第一步，我们可以用 Enzyme 的 shallow 方法对组件进行渲染，并测试渲染结果是否符合预期。
import { shallow } from 'enzyme';
it('renders the counter', () => {
const wrapper = shallow(<Counter />);
expect(wrapper.find('p').text()).toEqual('Count: 0');
expect(wrapper.find('button')).toHaveLength(2);
});我们首先使用 shallow 渲染了一个 Counter 组件，并进行了两个测试：
- 使用
find方法查找组件内的p元素，并通过text方法获取该元素的文本内容，与期望的Count: 0进行比较； - 同样使用
find方法查找组件内的两个button元素，并通过toHaveLength方法判断按钮的数量是否为 2。
如果测试通过，那么可以认为组件已经成功渲染并且每个子元素都按照期望进行了布局。
测试交互功能
现在我们开始测试组件的交互功能，即当用户点击按钮时，计数器是否能够正确地响应。首先，我们先用 shallow 渲染组件，并模拟用户点击两个按钮：
it('increments and decrements the count when the buttons are clicked', () => {
const wrapper = shallow(<Counter />);
wrapper.find('button').at(0).simulate('click');
expect(wrapper.find('p').text()).toEqual('Count: 1');
wrapper.find('button').at(1).simulate('click');
expect(wrapper.find('p').text()).toEqual('Count: 0');
});我们用 find 找到了第一个按钮，并使用 simulate 模拟用户点击操作。然后我们期望计数器的数量变成了 1，这也就说明了我们写的 handleIncrement 方法的效果。第二个测试是类似的。
测试组件生命周期
除了测试渲染结果和交互功能，我们也可以测试一些关于组件生命周期的东西。当组件挂载、卸载或更新时，我们可以在控制台中输出一些 debug 信息来检查组件是否按照期望的顺序执行。下面是一个例子：
-- -------------------- ---- ------- --------- --- --------- ------- ----------- -- -- - ----------------------------- --------------------- ----------------------------- ------------------------ ----------------------------- ---------------------- ----- ------- - ---------------- ---- --------------------------------------------------------------- ------------------ ------------------------------------------------------------------ ------------------ ------ - --- ---------------------------------------------------------------- ---
我们使用了 Jest 的 spyOn 来监控组件的 componentDidMount、componentWillUnmount 和 componentDidUpdate 方法。然后我们用 shallow 方法渲染了组件，再用 unmount 方法卸载组件。最后我们使用 setProps 方法来触发组件的 componentDidUpdate。如果这些测试都通过了，那说明组件的生命周期执行顺序已经符合我们的期望。
测试高阶组件
如果一个组件使用了高阶组件，那么就需要用到 Enzyme 的 mount 方法。例如，我们有一个高阶组件 WithCredentials，它会在每次请求中添加一些身份验证信息。我们要测试的是一个通过 mapStateToProps 和 mapDispatchToProps 连接到 Redux 的组件，它调用了一个 API 并将其结果显示在页面上。为了测试它，可以这样写：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - ----- - ---- ---------
------ --------------- ---- --------------------
----- ----------- - --------
----- --------- - --------------------------------
----- ----- - --------------
----------- ---- --- ------- ---------- ----- -- -- -
----- --------- - -- -- -------------- --------------
----- ------------------ - ------------------------ -------------------------------
----- ---------------- - ------------------------------------
----- ------- - ------
--------- --------------
----------------- --
-----------
--
---------------------------------------------------------
----- ------------------ -- --------
----------------------------------------------------- ----------
---我们首先使用 connect 将组件连接到 Redux 状态，并使用 WithCredentials 高阶函数来增加身份验证信息。然后我们用 mount 渲染组件，并断言在请求完成之前，组件应该渲染出一个 Loading...，当请求完成后，应该渲染出 Component content。
结论
本文介绍了使用 Enzyme 进行 React 组件测试的基本方法，并针对不同的场景给出了相应的代码示例。测试是保证前端代码质量的重要手段，希望本文能够帮助你构建更加健壮、可靠的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ed4cfe884a3e30f2a4b7f