学会使用 Enzyme：React 组件测试工具的详细介绍与应用技巧-JavaScript中文网-JavaScript教程资源分享门户

介绍

React 是现代前端开发非常流行的框架，它的组件化特性为开发者提供了更加灵活的开发方式，同时也为测试带来了挑战。Enzyme 是一个专门为 React 组件提供测试工具的开源库，它提供了丰富的 API 和异步的渲染模式来模拟用户操作以及测试组件的正确性，是 React 组件测试不可缺少的工具。

本文将详细介绍 Enzyme 及其应用，包括安装和配置、基础 API 的使用、Shallow Rendering 和 Mounting 两种测试方式的区别和应用、如何进行断言、以及一个完整的示例项目用于演示 Enzyme 在 React 组件测试中的作用和用法。

安装和配置

首先需要在项目中安装 Enzyme，可以使用 npm 或 yarn 安装，推荐使用 yarn：

yarn add -D enzyme react-test-renderer @wojtekmaj/enzyme-adapter-react-17

enzyme：主要库
react-test-renderer：避免在 mount 模式时渲染真实的 DOM 而使测试变慢
@wojtekmaj/enzyme-adapter-react-17：适配器，要根据本地的 React 版本选择合适的适配器

安装完成后，需要在测试文件中初始化 Enzyme：

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

Enzyme.configure({ adapter: new Adapter() });

基础 API 的使用

Enzyme 主要提供了三个 API：shallow()、mount() 和 render()。其中，shallow() 可以渲染出一个 React 组件的浅层组件树，使用该 API 可以快速渲染出 Modal 中的部分组件，便于在测试中断言展示和隐藏的正确性。mount() 可以渲染出一个完整的组件树，包括组件自身以及组件的子组件。render() 会返回一个标准的 HTML，只能用于静态分析。

以下是使用 shallow() 和 mount() 的示例代码：

import React from 'react';
import { shallow, mount } from 'enzyme';

describe('测试 Modal 组件', () => {
  test('测试是否正常渲染出组件', () => {
    const wrapper = shallow(<Modal />);
    expect(wrapper.exists()).toBe(true);
  });

  test('测试点击 mask 时是否关闭了 Modal', () => {
    const handleClose = jest.fn();
    const wrapper = mount(<Modal handleClose={handleClose} />);
    wrapper.find('.ant-modal-mask').simulate('click');
    expect(handleClose).toHaveBeenCalledTimes(1);
  });
});

在这个示例中，我们使用了 shallow() 来测试是否正常渲染出组件，并使用了 mount() 来测试点击 mask 时是否关闭了 Modal 的正确性。需要注意的是，mount() 模式需要渲染真实的 DOM 对象，可能会消耗很多时间，但在测试组件的交互性时非常有用。

Shallow Rendering 和 Mounting 两种测试方式的区别

Shallow Rendering 和 Mounting 是 Enzyme 提供的两种测试方式，它们的主要区别在于：

Shallow Rendering 只渲染出所测试组件的浅层组件树，不会渲染出组件的子组件，因此测试速度较快。
Mounting 模式会渲染出组件的完整组件树，包括所有子组件，因此测试速度会比 Shallow Rendering 模式慢一些。

以下是使用两种模式测试同一组件的代码：

// Shallow Rendering 模式
const wrapper = shallow(<MyComponent />);

// Mounting 模式
const wrapper = mount(<MyComponent />);

一般来说，建议在测试展示和隐藏的正确性时使用 shallow() 模式，因为其快速、简单，而在测试交互性时使用 mount()，因为需要测试整个组件及其子组件的正确性。

断言

断言是测试中最基本的一环，如果断言失败，那么测试就失败了。在 Enzyme 中可以使用 Jest 等测试框架提供的库进行断言，也可以使用 Enzyme 提供的 API，以下是一个简单的示例代码：

import React from 'react';
import { shallow } from 'enzyme';

describe('测试 MyComponent 组件', () => {
  test('测试 props: foo 的默认值', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.props().foo).toEqual('bar');
  });

  test('测试 onClick 是否被正常调用', () => {
    const handleClick = jest.fn();
    const wrapper = shallow(<MyComponent onClick={handleClick} />);
    wrapper.find('.my-button').simulate('click');
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

在这个示例中，我们使用 shallow() 渲染了 MyComponent 组件，并测试了组件的默认 props 和 onClick 事件的正确性。

Enzyme 的完整示例项目

为了更好的理解 Enzyme 在 React 组件测试中的应用，以下是一个完整的示例项目：enzyme-demo

该项目通过演示 Modal 组件的两个案例来详细介绍了 Enzyme 的用法及注意事项，包括：

如何用 Enzyme 渲染单个组件
如何测试一个响应对用户点击的组件的交互
如何使用 Enzyme 的断言提供有价值的测试结果
如何使用 Enzyme 的各种其他强大功能

这里只展示该项目的部分代码：

describe('测试 Modal 组件', () => {
  it('Modal 是否正常渲染出来', () => {
    const wrapper = shallow(TestComponent);
    expect(wrapper.exists()).toBe(true);
  });

  it('点击蒙层时，是否调用了 handleClose', () => {
    const handleClose = jest.fn();
    const wrapper = mount(<TestComponent handleClose={handleClose} />);
    wrapper.find('.ant-modal-mask').simulate('click');
    expect(handleClose).toHaveBeenCalled();
  });
});

该示例中使用了 shallow() 模式测试 Modal 是否正常渲染出来，并使用了 mount() 模式测试点击蒙层时是否调用了 handleClose，同时也用到了 Jest 提供的 mock 函数功能。

总结

本文介绍了 Enzyme 及其应用，包括安装和配置、基础 API 的使用、Shallow Rendering 和 Mounting 两种测试方式的区别和应用、如何进行断言，以及一个完整的示例项目用于演示 Enzyme 在 React 组件测试中的作用和用法。Enzyme 是一个非常强大的测试工具，它提供了丰富的 API 和异步的渲染模式来模拟用户操作以及测试组件的正确性，因此我们可以放心地在开发 React 组件时使用 Enzyme 进行测试，保证组件的正确性和稳定性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a9d9ffadd4f0e0ff349a0c