答案：前端项目中通过Jest与Enzyme搭建测试环境，配置Babel和适配器后，可使用shallow、mount及Mock方法对React函数组件、类组件及异步请求进行有效测试，保障代码质量。
前端项目中，JavaScript 测试是保障代码质量的关键环节。尤其在 React 项目中，Jest 与 Enzyme 的组合被广泛用于单元测试和组件测试。下面从实际出发，介绍如何搭建测试环境、编写有效测试用例，并给出常见场景的解决方案。
配置 Jest 与 Enzyme 环境
要使用 Jest 和 Enzyme，先安装必要的依赖：
- jest：JavaScript 测试框架，自带断言、Mock 和覆盖率工具
- enzyme：React 组件测试工具，提供灵活的渲染与查询方式
- enzyme-adapter-react-16（或对应版本）：适配 React 版本
- @babel/preset-env 和 @babel/preset-react：支持 ES6+ 和 JSX 语法
安装命令：
npm install --save-dev jest enzyme enzyme-adapter-react-16 @babel/preset-env @babel/preset-react babel-jest
在 babel.config.js 中配置 Babel：
立即学习“Java免费学习笔记（深入）”；
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};
创建 setupTests.js 初始化 Enzyme 适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
在 package.json 中指定 Jest 配置：
"jest": {
"setupFilesAfterEnv": ["<rootDir>/setupTests.js"],
"testEnvironment": "jsdom"
}
测试 React 函数组件
假设有一个简单的按钮组件：
const MyButton = ({ onClick, children }) => (
<button onClick={onClick}>{children}</button>
);
使用 Enzyme 编写测试，验证渲染内容与事件触发：
import React from 'react';
import { shallow } from 'enzyme';
import MyButton from './MyButton';
describe('MyButton', () => {
it('renders children correctly', () => {
const wrapper = shallow(<MyButton>Click me</MyButton>);
expect(wrapper.text()).toBe('Click me');
});
it('calls onClick when clicked', () => {
const mockFn = jest.fn();
const wrapper = shallow(<MyButton onClick={mockFn} />);
wrapper.simulate('click');
expect(mockFn).toHaveBeenCalled();
});
});
shallow 渲染只处理当前组件，不深入子组件，适合隔离测试。
测试带状态的类组件
对于有内部状态的组件，可使用 mount 进行完全渲染：
class ToggleButton extends React.Component {
state = { on: false };
handleClick = () => {
this.setState({ on: !this.state.on });
};
render() {
return (
<button onClick={this.handleClick}>
{this.state.on ? 'ON' : 'OFF'}
</button>
);
}
}
测试状态变化：
import { mount } from 'enzyme';
describe('ToggleButton', () => {
it('toggles state on click', () => {
const wrapper = mount(<ToggleButton />);
expect(wrapper.text()).toBe('OFF');
wrapper.find('button').simulate('click');
expect(wrapper.text()).toBe('ON');
wrapper.find('button').simulate('click');
expect(wrapper.text()).toBe('OFF');
});
});
mount 支持完整的 DOM 操作和生命周期，适合复杂交互测试。
模拟异步请求与模块
涉及 API 调用时，使用 Jest 的 Mock 功能避免真实请求：
export const fetchUserData = async (id) => {
const res = await fetch(`/api/users/${id}`);
return res.json();
};
测试时 Mock fetch：
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ id: 1, name: 'John' }),
})
);
it('fetches user data', async () => {
const data = await fetchUserData(1);
expect(data.name).toBe('John');
expect(fetch).toHaveBeenCalledWith('/api/users/1');
});
也可 Mock 整个模块，例如 Mock 辅助工具函数：
jest.mock('./utils', () => ({
formatName: (first, last) => `${first} ${last}`.toUpperCase(),
}));
这样可以在不依赖实现细节的情况下测试组件行为。
基本上就这些。Jest 提供了强大的运行与断言能力，Enzyme 让组件测试更直观。合理使用 shallow、mount 和 Mock，能覆盖大多数前端测试场景。测试不是负担，而是开发节奏的稳定器。
