Jest与Enzyme组合提升React测试效率：Jest负责运行和断言，Enzyme简化组件渲染操作。通过shallow进行浅渲染测试Button组件的渲染与点击事件，使用mount实现Counter组件状态变化验证，结合jest.mock模拟axios异步请求并测试数据获取，覆盖函数组件、类组件及副作用场景。配置setupTests.js引入适配器，package.json添加test脚本，确保测试环境就绪。测试驱动开发增强代码质量与重构信心。
前端项目中，单元测试能有效提升代码质量与维护性。Jest 与 Enzyme 是 React 项目中最常用的测试工具组合：Jest 负责运行测试、断言和模拟，Enzyme 提供更便捷的 React 组件渲染与操作方式。下面通过实际例子说明如何在 React 项目中使用 Jest 与 Enzyme 进行单元测试。
环境配置与基础安装
确保项目已安装 React 及相关依赖。接着安装 Jest 和 Enzyme：
npm install --save-dev jest enzyme enzyme-adapter-react-16
创建 setupTests.js 文件（通常放在 src 目录下）来配置 Enzyme 适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
在 package.json 中添加测试脚本：
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}
编写简单组件与对应测试
以一个简单的 Button 组件为例：
const Button = ({ onClick, children }) => (
);
对应的测试文件 Button.test.js：
import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';
describe('Button Component', () => {
it('renders children correctly', () => {
const wrapper = shallow();
expect(wrapper.text()).toBe('Click Me');
});
it('calls onClick when clicked', () => {
const mockFn = jest.fn();
const wrapper = shallow();
wrapper.simulate('click');
expect(mockFn).toHaveBeenCalled();
});
});
这里使用 shallow 渲染进行浅层挂载，只渲染当前组件，不深入子组件。simulate 模拟用户点击行为，jest.fn() 创建监听函数验证是否被调用。
测试带状态的组件
对于类组件或使用 useState 的函数组件，可测试状态变化：
const Counter = () => {
const [count, setCount] = React.useState(0);
return (
{count}
);
};
测试代码：
import { mount } from 'enzyme';
describe('Counter Component', () => {
it('increments count when button is clicked', () => {
const wrapper = mount(
expect(wrapper.find('span').text()).toBe('0');
wrapper.find('button').simulate('click');
expect(wrapper.find('span').text()).toBe('1');
});
});
注意这里使用 mount 进行完全渲染，支持 hooks 和状态更新。
模拟异步请求与副作用
实际开发中常涉及 API 调用。可用 jest.mock 模拟 fetch 或 axios：
jest.mock('axios');
import axios from 'axios';
假设组件在 componentDidMount 中请求数据：
componentDidMount() {
axios.get('/api/user').then(res => {
this.setState({ user: res.data });
});
}
测试中可模拟响应：
it('fetches data successfully', async () => {
axios.get.mockResolvedValueOnce({ data: { name: 'John' } });
const wrapper = mount(
await Promise.resolve(); // 等待 promise 完成
wrapper.update();
expect(wrapper.state('user').name).toBe('John');
});
jest.mock 让模块替换变得简单，mockResolvedValueOnce 模拟成功返回，也可用 mockRejectedValue 测试错误处理。
基本上就这些。Jest 提供强大的测试运行能力，Enzyme 让组件操作更直观。配合模拟、钩子和 DOM 查询，能覆盖大部分前端逻辑场景。测试写得早，重构更有底气。
