Reactjs 单元测试之 Enzyme 入门-JavaScript中文网-JavaScript教程资源分享门户

Reactjs 是目前前端开发中最流行的框架之一，它的组件化思想使得开发人员可以更加方便地进行模块化开发。单元测试是保证代码质量的重要手段之一，本文将介绍如何使用 Enzyme 进行 Reactjs 单元测试。

Enzyme 简介

Enzyme 是一个 Reactjs 组件测试工具，它提供了一系列 API，可以方便地操作 React 组件，包括渲染、查找、模拟事件等。Enzyme 支持三种渲染方式：浅渲染（Shallow Rendering）、静态渲染（Static Rendering）和完整渲染（Full Rendering）。其中，浅渲染只对当前组件进行渲染，不渲染子组件；静态渲染则将组件渲染成 HTML 字符串；完整渲染则将组件及其子组件都进行渲染。

安装 Enzyme

在使用 Enzyme 之前，需要先安装它。可以使用 npm 进行安装：

npm install enzyme --save-dev

同时，还需要安装 Enzyme 与 Reactjs 的适配器，以便 Enzyme 能够正确地渲染 React 组件。如果你使用的是 React 16 或以上版本，可以安装 @wojtekmaj/enzyme-adapter-react-17：

npm install @wojtekmaj/enzyme-adapter-react-17 --save-dev

如果你使用的是 React 15 或以下版本，可以安装 enzyme-adapter-react-15：

npm install enzyme-adapter-react-15 --save-dev

安装完成后，在测试文件中引入 Enzyme 和适配器：

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

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

浅渲染

浅渲染是 Enzyme 中最常用的渲染方式，它只对当前组件进行渲染，不渲染子组件。可以使用 shallow 方法进行浅渲染：

// javascriptcn.com 代码示例
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });
});

上面的代码中，我们使用了 Jest 的快照测试，将渲染后的组件与之前的快照进行比较，以确保组件的渲染结果没有发生变化。

除了渲染，Enzyme 还提供了一系列 API，可以方便地查找组件、模拟事件等。例如，可以使用 find 方法查找组件：

it('should render a button', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find('button')).toHaveLength(1);
});

上面的代码中，我们使用了 find 方法查找组件中的按钮，然后使用 Jest 的 toHaveLength 断言方法判断按钮数量是否正确。

静态渲染

静态渲染将组件渲染成 HTML 字符串，可以使用 render 方法进行静态渲染：

// javascriptcn.com 代码示例
import { render } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = render(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });
});

与浅渲染类似，我们也可以使用 Jest 的快照测试对渲染结果进行比较。

完整渲染

完整渲染将组件及其子组件都进行渲染，可以使用 mount 方法进行完整渲染：

// javascriptcn.com 代码示例
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = mount(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });
});

需要注意的是，完整渲染需要渲染整个组件树，速度比较慢，应该尽量避免使用。

模拟事件

Enzyme 还提供了一系列 API，可以方便地模拟事件。例如，可以使用 simulate 方法模拟点击事件：

it('should handle click', () => {
  const handleClick = jest.fn();
  const wrapper = shallow(<MyComponent onClick={handleClick} />);
  wrapper.find('button').simulate('click');
  expect(handleClick).toHaveBeenCalled();
});

上面的代码中，我们使用了 Jest 的模拟函数 jest.fn() 创建一个模拟的点击事件处理函数，然后使用 simulate 方法模拟点击事件，并断言处理函数是否被调用。

总结

Enzyme 是一个功能强大的 Reactjs 组件测试工具，可以方便地进行浅渲染、静态渲染和完整渲染，以及模拟事件等操作。在编写 Reactjs 组件时，应该尽量编写可测试的组件，以便进行单元测试，保证代码质量。

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