如何用Enzyme断言禁用按钮点击时onClick事件不触发？

好问题！要验证处于禁用状态的按钮被点击时不会触发onClick事件，我们可以通过追踪事件处理函数的调用情况来实现，下面提供两种常用的方案：

方案一：将点击逻辑作为props传入（推荐，测试更清晰） #

首先我们可以稍微调整组件，让onClick逻辑支持外部传入，这样测试时可以用Jest的mock函数来追踪调用：

修改后的sampleButton.jsx #

import React from 'react';

// 允许外部传入onClick，默认保留原有的console.log逻辑
const SampleButton = ({ onClick = () => console.log('You clicked me!') }) => (
  <button disabled={true} onClick={onClick} test-attr="button" type="button">
    Click Me
  </button>
);

export default SampleButton;

对应的测试代码sampleButton.test.jsx #

import React from 'react';
import { shallow } from 'enzyme';
import SampleButton from './sampleButton';

test('cannot click button if disabled', () => {
  // 创建一个Jest mock函数，用来追踪是否被调用
  const mockOnClick = jest.fn();
  
  // 渲染组件并传入mock函数作为onClick
  const wrapper = shallow(<SampleButton onClick={mockOnClick} />);
  const button = wrapper.find('[test-attr="button"]');
  
  // 模拟点击按钮
  button.simulate('click');
  
  // 核心断言：mock函数从未被调用过
  expect(mockOnClick).not.toHaveBeenCalled();
});

方案二：不修改原组件，mock控制台输出 #

如果不想改动原组件，我们可以通过mockconsole.log来验证它没有被触发（因为原组件的onClick是直接调用console.log）：

测试代码sampleButton.test.jsx #

import React from 'react';
import { shallow } from 'enzyme';
import SampleButton from './sampleButton';

test('cannot click button if disabled', () => {
  // 对console.log进行mock，替换为空实现
  const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
  
  const wrapper = shallow(<SampleButton />);
  const button = wrapper.find('[test-attr="button"]');
  
  // 模拟点击按钮
  button.simulate('click');
  
  // 断言console.log没有被调用
  expect(consoleLogSpy).not.toHaveBeenCalled();
  
  // 恢复console.log的原始功能，避免影响其他测试
  consoleLogSpy.mockRestore();
});

原理说明 #

当按钮的disabled属性为true时，React会阻止onClick事件的触发，所以无论我们怎么模拟点击，对应的事件处理函数都不会被执行。通过追踪函数的调用状态，就能验证这个行为是否符合预期。

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