Reactjs 如何使用jest和react测试库进行测试和反应

我有一个带有某种表单的屏幕，在提交时，我使用axios将请求发送到后端。成功收到回复后，我用react toastify敬酒。非常直接的屏幕。然而，当我尝试使用jest和react测试库通过集成测试来测试这种行为时，我似乎无法让toast出现在DOM上

我有一个这样的实用程序渲染器来渲染我正在使用toast容器测试的组件：

从“@testing library/react”导入{render}”；
从“React”导入React；
从“react toastify”导入{toastcainer}；
导出const renderWithToastify=（组件）=>(
渲染(
{component}
)
);

在测试本身中，我用react测试库填充表单，按下submit按钮，等待toast出现。我用它来嘲笑对方的反应。我确认回复是正常的，但出于某种原因，祝酒词拒绝出现。我目前的测试如下：

expect（wait screen.findByRole（“警报”））.toBeInTheDocument（）；

我正在寻找具有角色警报的元素。但这似乎不起作用。 此外，我还尝试过这样做：

。。。
以前（（）=>{
开玩笑。使用faketimers（）；
}
...
它（“测试”，（）=>{
...
行动（（）=>
jest.runAllTimers（）；
)
expect（wait screen.findByRole（“警报”））.toBeInTheDocument（）；
}

我对JS有点陌生，这个问题可能是由于axios和react toastify的异步特性造成的，但我不知道如何测试这种行为。我尝试了很多事情，包括模拟计时器并运行它们，模拟计时器并推进它们，而不是模拟它们并等待等等。我甚至尝试模拟toast调用，但我无法获得它工作正常。另外，这似乎是一个实现细节，所以我认为我不应该嘲笑它

我想问题是我在axios承诺解决后才展示祝酒词，所以计时器不知怎么搞糊涂了

我试图搜索许多地方，但没有找到答案

---

提前谢谢。

谢谢@Estus Flask，但问题要愚蠢得多：）我必须在我的组件之前渲染ToastContainer，如下所示：

从“@testing library/react”导入{render}”；
从“React”导入React；
从“react toastify”导入{toastcainer}；
导出const renderWithToastify=（组件）=>{
返回(
渲染(
{component}
)
);
};

然后，测试非常简单，我只需等待祝酒词的标题：

expect（wait screen.findByText（“警报文本”））.toBeInTheDocument（）；

由于某种原因，findByRole似乎不起作用，但我太累了，无法深入挖掘：）

---

我不必使用任何假计时器或兑现承诺。显然，RTL在使用Wait和finBy*查询时已经做了这些操作，只是渲染顺序错误。

我要做的是模拟

react to astify

中的方法，监视该方法以查看调用的内容，而不是屏幕上显示的实际组件：

// setupTests.js
jest.mock('react-toastify', () => {
  const actual = jest.requireActual('react-toastify');
  Object.assign(actual, {toast: jest.fn()});
  return actual;
});

然后在实际测试中：

//test.spec.js
从'react toastify'导入{toast}；
const toastCalls=[]
const spy=toast.mockImplementation（（…args）=>{
toastCalls.push（args）
}
)
描述（“…”，（）=>{
它（'should…'，（）=>{
//做些叫祝酒词的事
...
//然后
期望（toastCalls）。toEqual（…）
}
}
)

另一个建议是将此

模拟实现

放在一个单独的助手函数中，您可以轻松调用该函数进行所需的测试。这是一种熊骨方法：

函数startMonitoring（）{
const monitor={toast:[]，log:[]，api:[]，navigation:[]}；
toast.mockImplementation（（…args）=>{
监视器.吐司.推送（args）；
});
log.mockImplementation（（…args）=>{
monitor.log.push（args）；
});
api.mockImplementation（（…参数）=>{
monitor.api.push（args）；
});
navigation.mockImplementation（（…args）=>{
监视器、导航、推送（args）；
});
return（）=>监视器；
}
它（'should…'，（）=>{
const getspycall=startMonitoring（）；
//做点什么
expect（getspycall（））.toEqual({
敬酒：[……]，
日志：[……]，
api:[…]，
导航：[……]
});
});

在这里，解决方案是使用getByText：

await waitFor(() => {
  expect(screen.getByText(/Logged!/i)).toBeTruthy()
})

---

这样，您就可以在自己的测试中测试其他人的lib，而它可能在测试环境中工作不正常，请准备好对其进行模拟。您的组件中发生的情况未知，因此无法确切说明应该如何测试它。请参阅和。承诺不是“计时器”，因此它们肯定不会与运行计时器一起刷新。请尝试

flush promises

lib再等待一点，以防其他所有操作都正确，这就足以使承诺生效。否则，使用RTL的

waitFor

来实现更松散的控制流。