如何在react-testing-library中测试元素不可点击？

要验证父元素设置pointer-events: none后子元素不可点击的场景，没必要强行用userEvent.click（它会模拟真实用户交互，遇到不可点击元素直接报错），可以从两个核心维度验证：

1. 验证子元素的计算样式中pointer-events为none #

浏览器的pointer-events: none规则会直接阻止元素接收鼠标交互，所以检查子元素的计算样式，就能确认它处于不可点击状态：

const childElement = screen.getByRole('button'); // 根据实际元素调整选择器
const computedStyle = window.getComputedStyle(childElement);
expect(computedStyle.pointerEvents).toBe('none');

2. 验证点击事件未被触发 #

为了更严谨，还可以验证点击操作不会触发子元素的onClick事件。这里用fireEvent.click（它不会像userEvent那样严格模拟用户交互的所有限制），结合jest mock函数来验证：

// 给子元素的onClick绑定mock函数
const mockClickHandler = jest.fn();
render(<YourComponent onClick={mockClickHandler} />);

const childElement = screen.getByRole('button');
// 触发点击操作
fireEvent.click(childElement);
// 验证mock函数未被调用
expect(mockClickHandler).not.toHaveBeenCalled();

为什么不用userEvent.click？ #

userEvent的设计目标是尽可能贴近真实用户的交互行为，所以当遇到pointer-events: none的元素时，它会直接抛出错误——这本身就是该元素不可点击的证明，但我们的测试需要通过而非报错，所以改用上述两种验证方式更合适。

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