如何使用Jest和React Testing Library触发div内指定类名按钮的点击事件？

你碰到的错误Unable to fire a "click" event - please provide a DOM element. 翻译为：无法触发"click"事件 - 请提供一个DOM元素，本质是测试代码没找到目标按钮，问题出在两处：

1. 组件名拼写错误：测试里渲染的CustomButtom多写了一个t，正确应为CustomButton，这直接导致组件未正确渲染，DOM结构不存在。
2. querySelector语法错误：buttonContainer是类名，调用querySelector时需加前缀.，写成.buttonContainer，否则会去查找标签名为<buttonContainer>的元素，必然找不到。

修正后的测试代码 #

it('点击按钮时执行相应操作', () => {
    // 修正组件名拼写
    render(<CustomButton />);
    // 正确通过类名查找按钮
    const button = screen.getByTestId('main').querySelector('.buttonContainer .button');
    fireEvent.click(button);
    // 在这里添加你的断言逻辑，比如检查状态变化或方法调用
});

更符合RTL理念的写法 #

React Testing Library推荐按用户感知的元素角色查找，无需依赖类名或testId，测试更健壮：

it('点击按钮时执行相应操作', () => {
    render(<CustomButton />);
    // 按按钮角色+文本内容查找，/button/i 忽略大小写匹配
    const button = screen.getByRole('button', { name: /button/i });
    fireEvent.click(button);
    // 断言逻辑
});

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