使用 Enzyme 进行单元测试：从入门到精通-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，单元测试是非常重要的一环。它可以帮助我们在开发过程中快速发现问题，提高代码质量，减少后期维护的成本。而 Enzyme 是 React 中最常用的单元测试工具之一，本文将从入门到精通，介绍 Enzyme 的使用方法和技巧。

Enzyme 简介

Enzyme 是由 Airbnb 开发的 React 组件测试工具，它提供了一套简洁、灵活、强大的 API，可以让我们轻松地渲染组件并对其进行断言、操作和查询。

Enzyme 的主要特点包括：

支持多种渲染方式，包括浅渲染（shallow）、完整渲染（mount）和静态渲染（render）。
提供了丰富的断言和查询 API，可以方便地对组件进行测试。
可以与多种测试框架集成，包括 Jest、Mocha、Chai 等。

安装和配置

Enzyme 可以通过 npm 安装：

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

其中，enzyme-adapter-react-16 是 Enzyme 与 React 16.x 版本的适配器，如果你使用的是其他版本的 React，需要安装对应的适配器。

安装完成后，我们需要在测试文件中进行配置：

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

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

这样，Enzyme 就已经准备好了，我们可以开始编写测试用例了。

浅渲染

浅渲染是 Enzyme 中最常用的渲染方式，它只会渲染当前组件，不会渲染子组件。这种方式可以快速地测试组件的行为，而不用担心子组件的影响。

下面是一个简单的例子，测试一个 Counter 组件的渲染和点击事件：

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

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

  it('increments the count when the button is clicked', () => {
    const wrapper = shallow(<Counter />);
    const button = wrapper.find('button');
    button.simulate('click');
    expect(wrapper.state('count')).toEqual(1);
  });
});

在第一个测试用例中，我们使用了 Enzyme 提供的 shallow 函数来渲染 Counter 组件，并使用 Jest 的 toMatchSnapshot 函数进行快照测试。快照测试是一种测试方式，它会记录组件的渲染结果，并在后续测试中对比这个结果，以确保组件没有发生意外的变化。

在第二个测试用例中，我们先找到 Counter 组件中的按钮，然后模拟点击事件，最后断言组件的状态是否正确。需要注意的是，由于浅渲染不会渲染子组件，所以我们不需要担心子组件的状态是否正确。

完整渲染

完整渲染是 Enzyme 中另一种常用的渲染方式，它会渲染整个组件树，包括子组件。这种方式可以测试组件的生命周期、事件处理和样式等方面的功能。

下面是一个例子，测试一个 TodoList 组件的添加和删除功能：

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

describe('TodoList', () => {
  it('adds a todo item when the form is submitted', () => {
    const wrapper = mount(<TodoList />);
    const input = wrapper.find('input');
    const form = wrapper.find('form');
    input.simulate('change', { target: { value: 'Buy milk' } });
    form.simulate('submit');
    expect(wrapper.find('li')).toHaveLength(1);
    expect(wrapper.find('li').text()).toContain('Buy milk');
  });

  it('removes a todo item when the delete button is clicked', () => {
    const wrapper = mount(<TodoList />);
    const input = wrapper.find('input');
    const form = wrapper.find('form');
    input.simulate('change', { target: { value: 'Buy milk' } });
    form.simulate('submit');
    const deleteButton = wrapper.find('button');
    deleteButton.simulate('click');
    expect(wrapper.find('li')).toHaveLength(0);
  });
});

在这个例子中，我们使用了 mount 函数来渲染 TodoList 组件，并模拟了表单的提交和删除按钮的点击事件。需要注意的是，由于完整渲染会渲染整个组件树，所以我们需要确保子组件的状态和行为都是正确的。

静态渲染

静态渲染是 Enzyme 中最少用的渲染方式，它会将组件渲染成静态 HTML 字符串，并返回一个 Cheerio 对象。这种方式可以测试组件的 HTML 结构、样式和 SEO 等方面的功能。

下面是一个例子，测试一个 Link 组件的渲染和样式：

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

describe('Link', () => {
  it('renders correctly', () => {
    const wrapper = render(<Link href="https://www.google.com">Google</Link>);
    expect(wrapper).toMatchSnapshot();
  });

  it('has the correct style', () => {
    const wrapper = render(<Link href="https://www.google.com">Google</Link>);
    expect(wrapper.css('color')).toEqual('red');
  });
});

在第一个测试用例中，我们使用了 render 函数来渲染 Link 组件，并使用 Jest 的 toMatchSnapshot 函数进行快照测试。需要注意的是，由于静态渲染不会执行组件的 JavaScript 代码，所以我们只能测试 HTML 结构和属性。

在第二个测试用例中，我们使用了 Cheerio 对象的 css 函数来获取 Link 组件的样式，并断言其是否正确。需要注意的是，由于静态渲染不会执行组件的 JavaScript 代码，所以我们只能测试静态样式，不能测试动态样式。

断言和查询 API

Enzyme 提供了丰富的断言和查询 API，可以方便地对组件进行测试。下面是一些常用的 API：

shallow(component)：浅渲染组件。
mount(component)：完整渲染组件。
render(component)：静态渲染组件。
wrapper.debug()：打印组件的 HTML 结构。
wrapper.state(key)：获取组件的状态。
wrapper.prop(key)：获取组件的属性。
wrapper.find(selector)：查找组件中符合 selector 的元素。
wrapper.contains(node)：判断组件是否包含指定的节点。
wrapper.simulate(event, [args])：模拟组件的事件触发。
wrapper.setProps(props)：设置组件的属性。
wrapper.setState(state)：设置组件的状态。
wrapper.instance()：获取组件的实例。

需要注意的是，Enzyme 的 API 可能会随着版本的更新而发生变化，建议查看官方文档以获取最新的信息。

总结

Enzyme 是 React 中最常用的单元测试工具之一，它提供了一套简洁、灵活、强大的 API，可以让我们轻松地渲染组件并对其进行断言、操作和查询。本文从入门到精通，介绍了 Enzyme 的基本使用方法和技巧，希望能够帮助读者更好地进行前端单元测试。

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