Javascript fireEvent没有'；t单击React组件上的按钮

我正在为React组件编写测试。它是一个计时器，当你按下一个按钮时开始倒计时，然后当你按下同一个按钮时停止。我有一个测试用例，它尝试按下暂停按钮，等待一秒钟，然后再次按下暂停按钮，检查计时器以确保已过一秒钟：

Timer.test.js

render（）
const pauseButton=screen.getByText（'pause'）
const timerOutput=screen.getAllByRole（'heading'）[1]
描述（'Timer'，（）=>{
测试（'未暂停时计时器开始倒计时'，完成=>{
函数fetchTime（回调）{
fireEvent.单击（暂停按钮）
设置超时(
fireEvent.单击（暂停按钮），
1250
)
返回回调（timerOutput）
}
函数回调（数据）{
试一试{
expect（data）.toHaveTextContent（'24:59'））
完成（）
}捕获（错误）{
完成（错误）
}
}
获取时间（回调）
})
})

---

问题是，测试似乎没有按我所希望的方式点击

pauseButton

。当我运行测试时，Jest在终端中告诉我，

timerOutput

结果是

'25:00'

而不是

'24:59'

，并且组件似乎没有通过测试。但这是测试的问题，而不是组件的问题；当我在我的浏览器中运行应用程序并自己按下按钮时，它的工作方式应该是这样的。如何使该测试正常工作，并按我希望的方式按下按钮？

在几乎没有组件本身信息的情况下，很难获得准确答案

首先，我建议在需要处理异步调用时，在

test（）

中使用

async

arrow函数，这样就不会依赖于回调地狱

除此之外，我会尝试使用

jest.useFakeTimers（）

，这样您就可以提前设置超时计时器，以便正确地进行测试。您的第二个

fireEvent.click似乎从未被触发，因为测试会同步检查它

我刚注意到您最初请求了
timerOutput
，但在单击事件之后没有请求它

我想提出如下建议：

test('Timer starts counting down when unpaused', async () => {
      jest.useFakeTimers();
      fireEvent.click(pauseButton)
      setTimeout(
        () => {fireEvent.click(pauseButton)},
        1250
      )
      jest.runPendingTimers(); // This would run the above function
   
        expect(screen.getAllByRole('heading')[1]).toHaveTextContent('24:59')
    }
  })

事实上，从用户角度断言expect语句会更好，如：

expect(screen.getByText("24:59")).toBeVisible();

因为您不在乎包含该文本内容的HTML元素