React中点击按钮计数增加的测试不生效是什么原因？

代码问题排查 #

你的测试代码存在以下4处明显错误：

• 重复调用render(<Counter />)两次，第二次赋值的queryByTitle覆盖了第一次的变量，多余且会导致取到的元素归属异常，仅保留一次渲染即可。
• 首个断言expect(count.innerHTML).toBe(count.innerHTML)无任何测试意义，用变量和自身比对永远会通过，无法验证初始值正确性。
• 未做类型转换：count.innerHTML返回的是字符串格式，直接执行+1操作会触发字符串拼接（比如初始值为"0"时，"0"+1结果为"01"而非数字1），和预期计数逻辑不符。
• 点击按钮后未重新获取计数元素内容，你提前存储的count是点击前的引用，部分框架下innerHTML不会自动同步最新状态，导致比对结果不准。

修正后的测试代码 #

describe('checkbtn', () => {
    it('onClick', () => {
        const { queryByTitle } = render(<Counter />);
        const btn = queryByTitle('button1');
        // 提前转换为数字类型存储初始值，已知初始值的情况下建议直接写固定值断言，比如expect(initialCount).toBe(0)
        const initialCount = Number(queryByTitle('count').innerHTML);
        fireEvent.click(btn);
        const updatedCount = Number(queryByTitle('count').innerHTML);
        expect(updatedCount).toBe(initialCount + 1);
    })
})

内容的提问来源于stack exchange，提问作者Solomon Owusu-Ansah