Enzyme 测试 confirm 框的实现方式

Enzyme 是 React 生态系统中最受欢迎的测试工具之一，它可以用于测试 React 组件的行为和渲染结果。在实际开发中，我们经常需要测试需要用户操作确认的功能，例如删除操作时需要弹出 confirm 框，而这种情况在测试中经常会出现问题。那么，在 Enzyme 测试中如何测试 confirm 框呢？

方式一：重写 window.confirm

confirm 是 window 对象的一个方法，我们可以通过重写它来模拟用户的操作行为，从而测试 confirm 功能。

// javascriptcn.com 代码示例
// 整个测试过程中，我们需要重写 window.confirm
global.window.confirm = jest.fn(() => true);

describe('ConfirmDialog', () => {
  it('should display dialog when click delete button', () => {
    const wrapper = mount(<ConfirmDialog/>);

    wrapper.find('button').simulate('click');
    expect(wrapper.find('.dialog-title').text()).toEqual('Are you sure?');
    expect(wrapper.find('.dialog-body').text()).toContain('Do you confirm deleting this record?');
    expect(global.window.confirm).toHaveBeenCalledTimes(1);

    wrapper.unmount();
  });
});

以上代码中，我们首先在全局范围内重写了 window.confirm 方法，将其指向 jest.fn。在测试 ConfirmDialog 组件中，当用户点击删除按钮时，我们将判断是否弹出了弹窗，并验证弹窗中的文本内容是否符合预期。最后，我们也应该验证 window.confirm 方法是否被正确的调用。

方式二：使用一个 stub 方法

如果直接重写 window.confirm，可能会影响到其他测试场景，这时候我们可以使用一个 stub 方法来替代 window.confirm 方法。

// javascriptcn.com 代码示例
describe('ConfirmDialog', () => {
  it('should display dialog when click delete button', () => {
    const stub = jest.fn();
    window.confirm = stub.mockReturnValueOnce(true);

    const wrapper = mount(<ConfirmDialog/>);

    wrapper.find('button').simulate('click');
    expect(wrapper.find('.dialog-title').text()).toEqual('Are you sure?');
    expect(wrapper.find('.dialog-body').text()).toContain('Do you confirm deleting this record?');
    expect(stub).toHaveBeenCalledTimes(1);

    wrapper.unmount();
  });
});

在这种方式中，我们首先创建了一个 stub 方法，然后将 window.confirm 方法重写为该 stub 方法。最后在测试中，我们验证应该弹出 confirm 框的场景是否正确，并验证 stub 方法是否被正确的调用。

总结

在本文中，我们介绍了两种测试 confirm 框的实现方式，无论使用哪种方式，在测试时我们应该严格验证用户操作行为和验证确认框是否弹出，这样才能保证测试结果的准确性和可靠性。同时，我们也应该充分利用好 Enzyme 的优势，写出更简洁和有效的测试代码，提高代码质量和可维护性。

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