如何使用 Enzyme 测试 React 组件的生命周期-FunTeaLearn Online Web Tutorials

React 是一个非常流行的前端框架，并且其测试工具——Enzyme可以使得我们更容易地测试 React 组件。在本篇文章中，我们将一步步介绍如何使用 Enzyme 测试 React 组件的生命周期。

Enzyme 简介

Enzyme 是由 Airbnb 研发的一个 React 组件测试工具。它提供了一系列 API，可以模拟 React 组件，操作 DOM 元素以及模拟 React 组件的生命周期和状态。开发人员不需要真正地渲染组件，Enzyme 会自动为我们处理这些事情。这样我们可以更加方便、快速地简化测试流程。

安装 Enzyme

在开始之前，我们先安装 Enzyme：

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

我们还需要在项目中使用适合你 React 版本的 Adapter。在上述命令中 enzyme-adapter-react-16 是适用于 React 16 的 Adapter。这里我们示例的 React 版本为 16。

生命周期

请务必熟悉 React 组件的生命周期。这可以帮助我们更好地理解如何测试 React 组件的生命周期。React 组件的生命周期涉及以下方法：

componentDidMount
shouldComponentUpdate
componentWillUnmount
componentDidUpdate

这些方法的触发顺序非常重要而且会影响组件的行为和性能。因此，我们希望能够测试这些方法的行为和效果。

使用 Enzyme 测试组件生命周期

Enzyme 提供了三种方法来测试组件的生命周期：shallow、mount 和 render。接下来我们将介绍如何使用这些方法来测试组件的生命周期。我们将使用下述简单的组件作为测试对象：

// www.javascriptcn.com code example
import React from 'react';

class LifecycleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentDidUpdate() {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  handleClick = () => {
    this.setState({ counter: this.state.counter + 1 });
  }

  render() {
    return (
      <div>
        <div>Counter: {this.state.counter}</div>
        <button onClick={this.handleClick}>Add</button>
      </div>
    );
  }
}

export default LifecycleComponent;

shallow 测试

我们使用 shallow 在不渲染真正的 DOM 的情况下模拟组件的生命周期。在这种情况下，我们无法检查所有层次结构的 DOM 元素，但我们可以确保渲染树的准确性。下面是如何测试 componentDidMount 和 componentDidUpdate 方法：

// www.javascriptcn.com code example
import React from 'react';
import { shallow } from 'enzyme';
import LifecycleComponent from './LifecycleComponent';

describe('LifecycleComponent', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<LifecycleComponent />);
  });

  afterEach(() => {
    wrapper.unmount();
  });

  it('should invoke componentDidMount', () => {
    const componentDidMountSpy = jest.spyOn(
      LifecycleComponent.prototype,
      'componentDidMount'
    );
    wrapper.instance().componentDidMount();
    expect(componentDidMountSpy).toHaveBeenCalled();
  });

  it('should invoke componentDidUpdate', () => {
    const componentDidUpdateSpy = jest.spyOn(
      LifecycleComponent.prototype,
      'componentDidUpdate'
    );
    wrapper.instance().componentDidUpdate();
    expect(componentDidUpdateSpy).toHaveBeenCalled();
  });
});

在这两个测试用例中，我们创建 shallow 组件并手动调用 componentDidMount 和 componentDidUpdate 方法。我们可以检查这些方法是否被调用，并且确保组件的行为符合我们的预期。

mount 测试

mount 与 shallow 不同，它将渲染完整的组件层次结构，包括子组件。因此，我们可以测试 componentDidMount，componentDidUpdate 和 componentWillUnmount：

// www.javascriptcn.com code example
import React from 'react';
import { mount } from 'enzyme';
import LifecycleComponent from './LifecycleComponent';

describe('LifecycleComponent', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(<LifecycleComponent />);
  });

  afterEach(() => {
    wrapper.unmount();
  });

  it('should invoke componentDidMount', () => {
    const componentDidMountSpy = jest.spyOn(
      LifecycleComponent.prototype,
      'componentDidMount'
    );
    wrapper.instance().componentDidMount();
    expect(componentDidMountSpy).toHaveBeenCalled();
  });

  it('should invoke componentDidUpdate', () => {
    const componentDidUpdateSpy = jest.spyOn(
      LifecycleComponent.prototype,
      'componentDidUpdate'
    );
    wrapper.instance().componentDidUpdate();
    expect(componentDidUpdateSpy).toHaveBeenCalled();
  });

  it('should invoke componentWillUnmount', () => {
    const componentWillUnmountSpy = jest.spyOn(
      LifecycleComponent.prototype,
      'componentWillUnmount'
    );
    wrapper.instance().componentWillUnmount();
    expect(componentWillUnmountSpy).toHaveBeenCalled();
  });
});

在这三个测试用例中，我们创建了 mount 组件并手动调用 componentDidMount、componentDidUpdate 和 componentWillUnmount 方法。我们可以确保组件能够正确地卸载并检查这些方法是否被调用。

render 测试

render 与 shallow 类似，不过它仅仅能渲染当前组件并不能渲染所有子组件。所以在测试组件周期的时候我们并不优先使用它，如果我们需要测试的仅仅是组件渲染的效果，那么我们可以使用它。

// www.javascriptcn.com code example
import React from 'react';
import { render } from 'enzyme';
import LifecycleComponent from './LifecycleComponent';

describe('LifecycleComponent', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = render(<LifecycleComponent />);
  });

  afterEach(() => {
    wrapper.unmount();
  });

  it('should render without error', () => {
    expect(wrapper).toBeDefined();
  });
});

在这个测试用例中，我们使用 render 创建了一个组件。我们可以确保组件能够正常渲染而不会抛出异常。

总结

在本文中，我们介绍了使用 Enzyme 对 React 组件的生命周期的测试。我们解释了如何使用 shallow、mount 和 render 来测试组件的生命周期并提供了一个简单的示例。希望本文能够帮助你更好地理解如何使用 Enzyme 测试 React 组件的生命周期。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64960f2648841e9894301885

如何使用 Enzyme 测试 React 组件的生命周期