如何使用 Enzyme 测试 React 组件的无状态组件？-JavaScript中文网-JavaScript教程资源分享门户

前言

React 组件的测试是不可或缺的一部分，这不仅可以帮助我们快速发现组件的问题，还可以提高组件的可维护性和可扩展性。而 Enzyme 就是 React 的一个强大的测试工具，本文将介绍如何使用 Enzyme 来测试 React 组件的无状态组件。

Enzyme 是什么？

Enzyme 是一个针对 React 的 JavaScript 测试工具库，由 Airbnb 团队开发维护。它提供了一组简单的 API，可以轻松地操作 React 组件，进行快速高效的单元测试和集成测试。

Enzyme 主要提供了三种渲染方式：shallow、mount 和 render。

shallow：只渲染组件本身，不会渲染子组件；
mount：完整渲染组件树，可以模拟完整的生命周期和交互特性；
render：使用 cheerio 将组件渲染成静态 HTML，可以用于测试 SSR（服务器端渲染）或纯组件。

本文重点介绍 shallow 的使用。

为什么要测试无状态组件？

在 React 中，组件可以分为有状态组件和无状态组件。

有状态组件（Stateful Component）是指拥有自己的状态（state）的组件，其状态的改变会导致组件的重新渲染，例如 Class Component。而无状态组件（Stateless Component）则是指不拥有自己的状态，所有的状态都由外部传入。无状态组件通常是一个纯函数，只有 props 和 context 作为参数，返回组件的结构（JSX）。

但是，即使无状态组件没有内部状态，我们也需要对它们进行测试。这是因为有时我们会在无状态组件中进行逻辑判断、计算等操作，这些操作也需要进行测试。另外，无状态组件的可测试性和可维护性要远高于有状态组件。

如何测试无状态组件？

下面我们以一个简单的无状态组件为例，来介绍如何使用 Enzyme 测试无状态组件。假设我们有一个组件，用于展示一个名字和一张图片：

// javascriptcn.com 代码示例
import React from 'react';

const Avatar = ({ name, src }) => (
  <div className="avatar">
    <img src={src} />
    <span className="name">{name}</span>
  </div>
);

export default Avatar;

接下来我们编写相应的测试代码。

安装 Enzyme

首先我们需要安装 Enzyme，以及一些必要的依赖：

npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

因为 Enzyme 会与不同版本的 react-dom 和 react-router-dom 兼容性问题，我们建议版本号固定：

"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2"

在引入 Enzyme 时需要先进行适配，这里我们使用 enzyme-adapter-react-16：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

测试组件的结构

我们可以通过 shallow() 方法来进行组件的测试。shallow() 方法将我们创建的组件浅渲染一遍，这意味着它只会渲染组件本身，而不会渲染子组件。

首先，我们需要编写一个测试文件（avatar.test.js）：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import Avatar from './avatar';

describe('<Avatar />', () => {
  it('渲染正确的结构', () => {
    const wrapper = shallow(<Avatar name="John" src="john.png" />);
    expect(wrapper.find('img').prop('src')).toBe('john.png');
    expect(wrapper.find('.name').text()).toBe('John');
  });
});

其中，describe() 方法用于表示对组件的整体描述，it() 方法用于表示具体的测试用例。

在这里，我们用 shallow() 方法来渲染组件，然后可以通过 find() 方法找到相应的元素，进而进行断言。

在这个测试用例中，我们测试了组件渲染后，是否正确地展示了图片和名字。

测试组件的事件

在测试组件的事件时，我们需要通过 simulate() 方法来触发相应的事件。

下面是一个与按钮相关的组件，它的功能是在点击按钮时，在 console 中输出一条信息：

import React from 'react';

const Button = ({ label }) => (
  <button onClick={() => console.log(`clicked ${label}`)}>{label}</button>
);

export default Button;

我们可以编写一个测试用例，模拟点击事件，确保它能够正常地输出信息。

it('模拟点击事件', () => {
  const consoleSpy = jest.spyOn(console, 'log');
  const wrapper = shallow(<Button label="click me" />);

  wrapper.find('button').simulate('click');
  expect(consoleSpy).toHaveBeenCalledWith('clicked click me');
});

其中，jest.spyOn(console, 'log') 的作用是监听 console.log 的输出，以判断其是否被调用过。

通过 find() 方法找到按钮元素，然后使用 simulate() 方法模拟点击事件，在测试用例中进行相应的断言。

总结

本文介绍了如何使用 Enzyme 测试 React 组件的无状态组件。通过 shallow() 方法渲染组件，然后使用 find() 方法进行查找元素，使用 simulate() 方法模拟事件，可以有效地测试组件的结构和功能。相信这些技巧会对你的组件测试有所帮助。

示例代码

完整的示例代码可以在我的 github 中找到：Avatar.js 和 avatar.test.js。

参考资料

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