使用 Enzyme 管理测试代码，轻松写出高质量测试-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试代码也是非常重要的一环。但是对于初学者来说，写出高质量的测试并不容易。这时候一个好用的测试工具就显得尤为重要了。Enzyme 就是这样一个优秀的测试工具，它能够极大地提升测试代码的编写效率和测试质量。

Enzyme 是什么

Enzyme 是由 Airbnb 发布的一个 React 组件测试工具，它提供了非常便捷的 API 来操作 React 组件。这意味着你可以在测试代码中，轻松地渲染、操作、断言组件的行为和状态。

与其他测试工具相比，Enzyme 的最大特点是提供了一种更加声明式的测试方式。这不仅让测试代码更容易阅读，也让测试更加可靠、易于维护。

安装 Enzyme

Enzyme 可以通过 NPM 安装。你可以在你的项目下使用以下命令安装 Enzyme：

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

我们需要同时安装 Enzyme 和它的适配器(adapter)，官方提供的是针对 React 16 的适配器。这个适配器是必须的，因为它让 Enzyme 知道如何与 React 16 一起工作。

Enzyme 的三种渲染方式

Enzyme 提供了三种渲染方式，分别是：

静态渲染(static rendering)：将组件渲染成静态 HTML 字符串，然后通过访问 renders 输出结果来判断组件是否渲染正确；
shallow 渲染：渲染组件及其所有子组件，但子组件只会被渲染为钩子(hooks)；
完全渲染(full rendering)：渲染组件及其所有子组件，同时会触发组件的完整生命周期。

静态渲染

这种方式主要用于测试组件的 html 输出结果，它的 API 如下：

import { render } from 'enzyme';

// 渲染组件并返回静态 HTML 字符串
render(<MyComponent />);

shallow 渲染

shallow 渲染主要用于测试一个组件的渲染结果、子组件是否被渲染、组件内部状态和 props。其特点是：

浅层渲染，不会渲染子组件；
子组件被替换为钩子；
和 DOM 操作类似的 API，具有便捷性。

使用 shallow 的 API 如下：

import { shallow } from 'enzyme';

// 浅层渲染 MyComponent
const wrapper = shallow(<MyComponent />);

完全渲染

完全渲染是一种更加真实的渲染，它会触发组件的完整生命周期函数。使用此种渲染方式可以测试组件的操作等行为。其 API 如下：

import { mount } from 'enzyme';

// 完全渲染 MyComponent
const wrapper = mount(<MyComponent />);

Enzyme 常用 API

Enzyme 提供了非常丰富的 API，这里仅介绍最常用的几个 API。

find(selector)

find 用于在当前的渲染结果中查找与 selector 匹配的组件，其返回结果仍然是一个 Enzyme 包装器。

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);
const target = wrapper.find('.targer-selector');

props()

props() 方法获取当前包装器中组件的 props：

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);
const target = wrapper.find('.targer-selector');
console.log(target.props()); // 打印 target 的 props

simulate(event[, data])

simulate 方法模拟组件的 DOM 事件操作：

import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);
const target = wrapper.find('.targer-selector');
target.simulate('click');

state()

state() 方法可以获取当前包装器包裹的组件的状态：

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);
const target = wrapper.find('.targer-selector');
console.log(target.state()); // 打印 target 的 state

setProps(props[, callback])

setProps() 方法可以改变当前包装器包裹组件的 props：

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent />);
wrapper.setProps({
  newProps: 'new',
});

Enzyme 的示例代码

这里是一个使用 Enzyme 测试 React 组件的示例代码：

// www.javascriptcn.com code example
import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { count } = this.state;
    this.setState({
      count: count + 1,
    });
  }

  render() {
    const { count } = this.state;
    return (
      <div className="my-component">
        <h1>MyComponent</h1>
        <p>{count}</p>
        <button className="increment" onClick={this.handleClick}>
          Increment
        </button>
      </div>
    );
  }
}

describe('MyComponent', () => {
  it('render correctly with initial count', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('h1').text()).toEqual('MyComponent');
    expect(wrapper.find('p').text()).toEqual('0');
    expect(wrapper.find('.increment').prop('onClick')).toBeInstanceOf(Function);
  });

  it('increment button should update the count', () => {
    const wrapper = shallow(<MyComponent />);
    const incrementBtn = wrapper.find('.increment');
    incrementBtn.simulate('click');
    expect(wrapper.find('p').text()).toEqual('1');
  });
});

这个示例展示了如何使用 Enzyme 测试一个 React 组件的渲染和操作，测试可以使组件的质量和稳定性更高。

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

使用 Enzyme 管理测试代码，轻松写出高质量测试