Enzyme 中的挂载时期和卸载时期-JavaScript中文网-JavaScript教程资源分享门户

在 React 中，组件的生命周期非常重要，因为它们可以让我们在特定的时间点执行特定的操作。Enzyme 是一个流行的 React 测试工具，它提供了一些工具来测试组件的生命周期，包括挂载时期和卸载时期。

挂载时期

当一个组件被渲染到 DOM 中时，它进入了挂载时期。在这个时期，组件执行一些初始化操作，例如设置默认状态和绑定事件处理程序。

Enzyme 提供了一些方法来测试组件的挂载时期。其中，最常用的方法是 shallow()。这个方法会渲染组件的浅层副本，并返回一个包含组件实例的 ShallowWrapper 对象。我们可以使用这个对象来测试组件的挂载时期。

下面是一个示例代码：

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

describe('MyComponent', () => {
  it('should render without throwing an error', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.my-component').length).toBe(1);
  });

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

  it('should bind the click event handler', () => {
    const wrapper = shallow(<MyComponent />);
    const instance = wrapper.instance();
    const spy = jest.spyOn(instance, 'handleClick');
    instance.forceUpdate();
    wrapper.find('button').simulate('click');
    expect(spy).toHaveBeenCalled();
  });
});

在这个示例代码中，我们测试了 MyComponent 组件的三个方面：

是否可以正常渲染；
是否正确初始化了状态；
是否正确绑定了点击事件处理程序。

我们使用 shallow() 方法来获取组件的浅层副本，并使用 ShallowWrapper 对象来测试组件的状态和事件处理程序。

卸载时期

当一个组件从 DOM 中卸载时，它进入了卸载时期。在这个时期，组件执行一些清理操作，例如取消事件绑定和清除定时器。

Enzyme 也提供了一些方法来测试组件的卸载时期。其中，最常用的方法是 unmount()。这个方法会卸载组件，并返回一个包含组件实例的 ShallowWrapper 对象。我们可以使用这个对象来测试组件的卸载时期。

下面是一个示例代码：

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

describe('MyComponent', () => {
  it('should unmount without throwing an error', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.my-component').length).toBe(1);
    wrapper.unmount();
    expect(wrapper.find('.my-component').length).toBe(0);
  });

  it('should clear the interval on unmount', () => {
    jest.useFakeTimers();
    const wrapper = shallow(<MyComponent />);
    expect(setInterval).toHaveBeenCalledTimes(1);
    wrapper.unmount();
    expect(clearInterval).toHaveBeenCalledTimes(1);
    jest.useRealTimers();
  });
});

在这个示例代码中，我们测试了 MyComponent 组件的两个方面：

是否可以正常卸载；
是否正确清除了定时器。

我们使用 shallow() 方法来获取组件的浅层副本，并使用 ShallowWrapper 对象来测试组件的卸载时期。我们还使用了 Jest 的 useFakeTimers() 和 useRealTimers() 方法来模拟和恢复定时器。

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

Enzyme 中的挂载时期和卸载时期

挂载时期

卸载时期

接着读