Enzyme 详细使用手册：在 React 项目中进行组件测试-JavaScript中文网-JavaScript教程资源分享门户

在 React 项目中进行组件测试是前端开发中很重要的一环。而 Enzyme 是目前 React 生态中使用最为广泛的测试库之一，它提供了强大而易用的 API，能够让我们轻松地模拟 React 组件的渲染和交互，以及断言组件的输出结果。本文将详细介绍 Enzyme 的使用方法，包括安装、配置和各种 API 的使用。

安装和配置

在使用 Enzyme 之前，我们需要先安装它。在项目中使用 npm 或 yarn 进行安装：

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

或者

yarn add --dev enzyme enzyme-adapter-react-16

其中，enzyme 是主要的 Enzyme 库，enzyme-adapter-react-16 是 React 16 的适配器，如果你的项目使用的是其他版本的 React，可以选择相应的适配器。安装完成后，在项目中的测试文件中引入 Enzyme：

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

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

其中，我们通过 configure 方法配置了 Enzyme 使用 React 16 的适配器。

Shallow Rendering

Shallow Rendering 是 Enzyme 中最常用的渲染方式，它可以让我们只渲染当前组件，不渲染它的子组件。这样可以提高测试效率，同时也能够保证测试的精准度。使用 Shallow Rendering，我们可以轻松获取组件的 HTML 结构，以及断言组件的输出结果。

首先，让我们来看一个简单的组件：

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

export default MyComponent;

这个组件接受 title 和 content 两个 props，分别渲染为一个标题和一段内容。接下来，我们可以使用 Enzyme 的 shallow 方法来渲染这个组件，并获取它的 HTML 结构：

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent title="Hello, World!" content="Lorem ipsum dolor sit amet." />);
    expect(wrapper.html()).toMatchSnapshot();
  });
});

在测试用例中，我们使用 shallow 方法渲染了这个组件，并传入了相应的 props。然后，我们通过 html 方法获取了组件渲染后的 HTML 结构，并使用 Jest 的 toMatchSnapshot 方法对其进行快照测试。如果组件的输出结果与之前的快照不一致，测试将会失败。

Full DOM Rendering

如果我们需要测试组件的交互行为，比如点击按钮后是否能够正确地更新状态或触发其他事件，那么就需要使用 Full DOM Rendering。这种渲染方式会将组件及其子组件完全渲染出来，可以进行真实的交互测试。不过需要注意的是，Full DOM Rendering 的效率比 Shallow Rendering 更低，建议在必要时才使用。

下面是一个需要进行交互测试的组件：

import React, { useState } from 'react';

function MyButton(props) {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Click count: {count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default MyButton;

这个组件有一个按钮，每次点击后都会将计数器加一并更新显示。为了测试按钮的点击行为，我们需要使用 Full DOM Rendering，并模拟点击事件。

import React from 'react';
import { mount } from 'enzyme';
import MyButton from './MyButton';

describe('MyButton', () => {
  it('should increment count when clicked', () => {
    const wrapper = mount(<MyButton />);
    expect(wrapper.find('p').text()).toBe('Click count: 0');
    wrapper.find('button').simulate('click');
    expect(wrapper.find('p').text()).toBe('Click count: 1');
  });
});

在测试用例中，我们使用 mount 方法渲染了这个组件，并断言了初始的显示结果。然后，我们使用 Enzyme 的 find 方法找到了按钮和计数器元素，并通过 simulate 方法模拟了点击事件。最后，我们再次查找计数器元素，并断言它的显示结果是否正确。

其他 API

除了上面介绍的 shallow 和 mount 方法，Enzyme 还提供了其他一些有用的 API，如 render 方法、setState 方法、instance 方法等等。这些 API 可以让我们更加灵活地进行组件测试。

例如，我们可以使用 render 方法获取组件的静态 HTML 结构，但不进行任何交互测试：

import React from 'react';
import { render } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = render(<MyComponent title="Hello, World!" content="Lorem ipsum dolor sit amet." />);
    expect(wrapper.html()).toMatchSnapshot();
  });
});

我们也可以使用 setState 方法手动更新组件的状态，并断言组件更新后的输出结果：

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should update state correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.state('count')).toBe(0);
    wrapper.setState({ count: 1 });
    expect(wrapper.state('count')).toBe(1);
  });
});

另外，我们还可以使用 instance 方法获取组件的实例，在测试中直接调用组件内部的方法或属性：

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should call method correctly', () => {
    const wrapper = shallow(<MyComponent />);
    const instance = wrapper.instance();
    const spy = jest.spyOn(instance, 'myMethod');
    instance.myMethod();
    expect(spy).toHaveBeenCalled();
  });
});

总结

Enzyme 是 React 生态中一款强大而易用的测试库，通过 Shallow Rendering 和 Full DOM Rendering 等不同的渲染方式，可以让我们轻松地对组件进行测试。另外，Enzyme 还提供了丰富的 API，可以满足不同的测试需求。

当然，测试只能检查代码是否符合预期，不能完全消除 bug 的出现。但是，测试可以最大程度地提高代码的质量和可维护性，让我们更加自信地为项目贡献自己的力量。

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

Enzyme 详细使用手册：在 React 项目中进行组件测试

安装和配置

Shallow Rendering

Full DOM Rendering

其他 API

总结

纠错反馈