Jest与Enzyme测试实战教程

本文深入浅出地讲解了如何在React前端项目中实战落地Jest与Enzyme测试体系：从环境搭建（Babel配置、适配器初始化、Jest参数设置）到分层测试策略——用shallow精准隔离验证函数组件渲染与事件逻辑，用mount完整模拟类组件状态切换与DOM交互，再到借助Jest Mock机制可靠拦截异步请求和模块依赖，覆盖真实开发中最常见的测试痛点；不仅提供可即用的代码范例，更传递“测试是开发节奏稳定器”的核心理念，让质量保障真正融入日常编码实践。

前端项目中，JavaScript 测试是保障代码质量的关键环节。尤其在 React 项目中，Jest 与 Enzyme 的组合被广泛用于单元测试和组件测试。下面从实际出发，介绍如何搭建测试环境、编写有效测试用例，并给出常见场景的解决方案。

配置 Jest 与 Enzyme 环境

要使用 Jest 和 Enzyme，先安装必要的依赖：

安装命令：

npm install --save-dev jest enzyme enzyme-adapter-react-16 @babel/preset-env @babel/preset-react babel-jest

在 babel.config.js 中配置 Babel：

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，能覆盖大多数前端测试场景。测试不是负担，而是开发节奏的稳定器。

以上就是《Jest与Enzyme测试实战教程》的详细内容，更多关于测试的资料请关注golang学习网公众号！