前端开发市场越来越繁荣，越来越多的企业和开发者在使用 React 对 Web 应用进行构建。而为了提升团队代码质量、开发效率，以及改进代码的可维护性，对 React 组件进行测试是一个绕不过去的话题。本文着重介绍 Jest 和 Enzyme 这两个当下常用的 React 测试库，并针对其使用进行详细讲解。
关于 Jest 和 Enzyme
Jest 是 Facebook 出品的一个 JavaScript 测试框架，是当前最流行的测试解决方案之一。而 Enzyme 是由 Airbnb 开发的一个用于 React 组件测试的 JavaScript 工具库，它提供了能够修改组件状态以及模拟 DOM 事件的 API。
安装 Jest 和 Enzyme
在安装 Jest 和 Enzyme 之前，我们需要先确定项目是否已经集成了 React。若没有在项目中安装 React，可以通过以下命令进行安装：
npm install react --save
安装完 React 之后，我们就可以安装 Jest 和 Enzyme 了。需要注意的是，Jest 会自动附带 Enzyme，我们只需安装 Jest 即可。命令如下：
npm install jest --save-dev
创建测试
我们在一个名为 __tests__ 的文件夹中来存放我们的测试用例。在这个文件夹中，我们将创建一个名为 YourComponent.test.js 的文件来测试我们的组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ ------------- ---- ------------------- ------------- ------- ------- ---------- -- -- - ----- --- - ------------------------------ ------------------------------ --- ----- ------------------------------------- ---
使用 Enzyme 测试 React 组件
接下来，让我们看看如何使用 Enzyme 进行 React 组件测试。
安装 Enzyme
首先，我们需要安装 Enzyme 和 Enzyme 适配器。在命令行输入以下命令即可：
npm install enzyme enzyme-adapter-react-16 --save-dev
配置 Enzyme
在使用 Enzyme 之前，我们需要先在 jest.config.js 中配置 Enzyme：
module.exports = {
snapshotSerializers: ['enzyme-to-json/serializer'],
setupFilesAfterEnv: ['<rootDir>/src/setupEnzyme.js']
};然后在 setupEnzyme.js 中配置 Enzyme 适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });测试 React 组件 using Enzyme
测试组件的第一步是将其渲染并检查是否正常运行。我们可以使用 .shallow() 方法进行组件渲染。以下是一个示例：
import React from 'react';
import { shallow } from 'enzyme';
import YourComponent from '../YourComponent';
it('renders without crashing', () => {
shallow(<YourComponent />);
});接下来，我们可以使用 .dive() 方法代替 .shallow() 方法来获取最外层的子组件。
import React from 'react';
import { shallow } from 'enzyme';
import YourComponent from '../YourComponent';
it('renders the correct child components', () => {
const wrapper = shallow(<YourComponent />);
expect(wrapper.find('ChildComponent').length).toBe(2);
});你甚至可以使用 .props() 方法直接访问组件属性，以及使用 .simulate() 方法模拟组件事件的触发。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- - ---- --------- ------ ------------- ---- ------------------- --------- --- ------- ---------- -- -- - ----- ------- - ---------- ----- ------- - -------------------- ----------------- ---- ----------------------------------------- ----------------------------------- ---
其他的 Jest 和 Enzyme 测试技巧
对于 Jest 和 Enzyme 使用者，以下是一些其他的测试技巧建议：
- 使用 Jest 提供的
.toMatchSnapshot()方法进行组件截图测试； - 使用 Enzyme 提供的
.mount()方法详细测试 componentDidMount()、componentDidUpdate() 和 componentWillUnmount() 函数； - 使用 Jest 提供的 DOM 相关的匹配器对断言进行验证。
结论
使用 Jest 和 Enzyme 可以帮助我们提高 React 组件的测试质量，但在实践中它们可能会适用于不同的场景。通过本文，你已经学会了如何使用 Jest 和 Enzyme 进行 React 组件测试，并学会了其他的测试技巧建议。祝你旅途愉快，测试顺利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674eda60e884a3e30f2a776f