如何使用Enzyme测试React组件中window.confirm的取消逻辑？

我来帮你搞定这个测试问题！你之前的写法行不通，是因为window.confirm是一个函数，不能直接和字符串'false'做比较。要模拟用户取消确认框的行为，我们需要手动mock这个原生函数，控制它的返回值，这样就能验证后续逻辑是否符合预期了。

正确的测试方案 #

核心思路是：在测试开始前，把window.confirm替换成一个返回false的函数（模拟用户点击“取消”），然后执行按钮点击，最后断言postRequest没有被调用。

用Jest的Mock写法（推荐）

如果你的项目用Jest做测试框架，可以直接用jest.fn()来mock：

it('当点击屏蔽按钮、按钮未禁用且确认框被取消时，不调用postRequest', () => {
  // 模拟用户取消确认框：让window.confirm返回false
  window.confirm = jest.fn(() => false);
  
  wrapper.setState({ disabled: false });
  const aButton = wrapper.find('button');
  aButton.simulate('click');
  
  // 可选：验证confirm确实被触发了，确保交互流程正确
  expect(window.confirm).toHaveBeenCalled();
  // 断言postRequest没有被调用
  expect(api.postRequest.calledOnce).to.equal(false);
});

通用mock写法（适配其他测试框架）

如果不用Jest，你可以手动保存原函数，测试后恢复，避免影响其他测试：

// 在测试块外保存原生confirm函数
const originalConfirm = window.confirm;

it('当点击屏蔽按钮、按钮未禁用且确认框被取消时，不调用postRequest', () => {
  // 替换成返回false的函数，模拟取消
  window.confirm = () => false;
  
  wrapper.setState({ disabled: false });
  const aButton = wrapper.find('button');
  aButton.simulate('click');
  
  expect(api.postRequest.calledOnce).to.equal(false);
});

// 测试后恢复原生confirm，避免影响其他用例
afterEach(() => {
  window.confirm = originalConfirm;
});

为什么原来的写法不对？ #

你之前写的if (window.confirm == 'false')存在两个问题：

• window.confirm是一个函数引用，不是字符串，直接和'false'比较永远不成立；
• 即使调用它，window.confirm()返回的是布尔值true或false，也不是字符串类型的'false'。

通过mock函数的返回值，我们就能精准控制用户的操作行为，从而验证组件的逻辑是否符合预期。

内容的提问来源于stack exchange，提问作者Tony Gaeta