使用 Enzyme 测试 Ant Design Pro 组件-JavaScript中文网-JavaScript教程资源分享门户

Ant Design Pro 是一个基于 Ant Design 设计风格的一套开箱即用的中台前端/设计解决方案。Ant Design Pro 提供了丰富的组件和模板，还成功地集成了 React、Redux、Umijs 等前端开发技术栈，方便开发者快速搭建中后台管理系统。本文将介绍如何使用 Enzyme 测试 Ant Design Pro 组件。

Enzyme 简介

Enzyme 是 Airbnb 开源的 React 组件测试工具集合，主要用于简化组件测试过程。Enzyme 提供了三种测试方法：shallow、mount 和 render。

shallow：测试当前组件而不渲染其子组件，对测试性能有优化作用。
mount：测试当前组件并渲染其子组件，对测试引擎有较高的肌肉和更好的渲染性能。
render：使用类似于 JSDom 的方式渲染组件，并且返回普通的 HTML。

Enzyme 提供了一套简单的 API，使得开发者能够像 jQuery 风格的方式访问组件的 props、state 和实例。

配置 Enzyme

在使用前，我们需要先配置 Enzyme，并把 React 适配器也加上：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

在 Ant Design Pro 项目中，我们可以在 src/setupTests.js 文件中配置 Enzyme：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

到这里，我们就成功地配置了 Enzyme。

编写测试代码

在 Ant Design Pro 中，我们需要测试的组件通常都是。前缀为 SiderMenu、BasicLayout、PageHeaderWrapper 等组件。这些组件都相对较为复杂，需要新建子组件、联动效果、路由操作以及接口调用等。为了更好地使用基于 Enzyme 的 TDD 测试技术，我们需要先搞清楚每个组件的功能和使用。

我们以 SiderMenu 组件为例，为什么选这个组件呢？因为 SiderMenu 是 Ant Design Pro 项目的核心之一，是页面主体架构的基础。该组件主要负责左侧菜单栏的展示、icon、路由等。

我们新建一个名为 SiderMenu.test.js 的文件，在这个文件中编写 SiderMenu 的测试用例。

我们可以先测试组件的渲染是否成功：

import React from 'react';
import { shallow } from 'enzyme';
import SiderMenu from '@/components/SiderMenu';

it('renders without crashing', () => {
  shallow(<SiderMenu />);
});

上述代码通过 shallow API 测试了 SiderMenu 组件的渲染是否成功。如果 SiderMenu 组件中有语法错误，则会测试结果会报错，告诉我们哪个地方出错了并给予定位。

接下来，我们可以测试组件中的 props 是否正常：

it('MenuData should render correctly', () => {
  const wrapper = shallow(<SiderMenu menuData={[]} />);
  expect(wrapper.find('Menu').exists()).toBe(true);
});

上述代码中，我们将 Menu 组件的展示数据设置为 []，并使用 find API 找到 Menu 组件，判断是否成功渲染。

最后，我们可以测试组件中的状态和方法是否生效：

it('state should handleCollapse correctly', () => {
  const wrapper = shallow(<SiderMenu menuData={[]} />);
  wrapper.instance().handleCollapse();
  expect(wrapper.state().collapsed).toBe(false);
});

上述代码中，我们测试了 handleCollapse 方法是否能够成功修改 SiderMenu 组件的折叠状态，并且将折叠状态设为 false。

总结

在本文中，我们使用了 Enzyme 技术对 Ant Design Pro 组件进行测试。首先，我们了解了 Enzyme 的简介和使用方式；其次，我们在项目配置中添加了 Enzyme；最后，我们以 SiderMenu 组件为例，简单介绍了如何编写测试用例。

测试代码不仅能够保证组件质量、提高产品可靠性、保证项目进度，还能够提高我们的编码能力、熟悉组件代码、提高项目技术水平。我们应该更加注重测试流程，用于对组件代码质量的保证。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64cb4e315ad90b6d041fc7a1