Arrays 反应测试库-使用'；等待等待（）和#x27；事后

我正在尝试使用测试库在fireEvent.click之后检查DOM元素。我知道我需要在fireEvent之后等待，但不确定为什么仅仅使用wait不起作用？下面是用两种方法编写的相同测试——第一种失败，第二种通过。我不明白为什么第一个失败了…我非常感谢任何见解

p、 s.--我知道wait已被弃用，waitFor是首选，但是由于一些限制，我现在无法更新版本：(

失败测试

//此测试失败，出现以下错误和警告：
//错误：无法通过以下方式找到元素：[data test=“name\u wrapper”]
//警告：测试中对OnlinePaymentModule的更新未包装在act（…）中。
它（'这是一个失败的测试…为什么'，异步（）=>{
常量{getByText，getByTestId}=render（）；
const button=getByText（“打开模式”）；
fireEvent。单击（按钮）；
const nameWrapper=wait getByTestId（'name_wrapper'）；
期待(
nameWrapper.getElementsByTagName（'output'）[0].textContent
).托比（“乔恩·多伊”）；
const numberWrapper=await getByTestId（'number_wrapper'）；
期待(
NumberRapper.getElementsByTagName（'output'）[0].textContent
).toBe（'123456'）；
})

5个月后，我回来回答我的问题（自从发布这个问题后，我学到了很多东西lol）

首先，由于5个月后，我想强调，如果可能，最好使用

userEvent

库，而不是

firevent

如果我不说代码中有很多反模式，那也太失职了……您应该在

waitFor

中只做一个断言。您应该避免使用

getByTestId

，而使用更易于访问的替代方案

最后，第一个测试失败的原因是您不能将

wait

与

getBy*

一起使用

getBy

不是异步的，也不会等待。这可能是更好的解决方案：

fireEvent.click(button);
const nameWrapper =  await findByTestId('name_wrapper');

然后测试将等待

nameWrapper

元素可用

第二个测试通过了，因为

getBy

包装在RTL的异步实用程序中，

wait

（

wait

现在被弃用，取而代之的是

waitFor

）。这本质上就是

findBy

在引擎盖下所做的--

findBy

是

getBy

的异步版本

---

当我发布这个问题时，我没有完全理解

wait

是一个Javascript关键词（只是让代码等待承诺解决的语法糖）。

wait

（现在

waitFor

）是一个来自RTL的实用程序，它将使测试的执行等待，直到回调没有抛出错误。

在第一个示例中

getByTestId

不返回承诺，因此这些等待是无意义的。在第二个示例中，您可以执行

await wait（）

然后继续。您可以阅读更多内容，这里有一些很好的示例。例如，

等待waitFor（回调）

所做的是等待回调为真，然后继续。不，但是您可以先

等待waitFor（（）=>getByTestId（…）；const el=getByTestId（…）

。还有一个很好的来源，那就是你不需要使用findByTestId的

等待

，是吗？老兄，非常感谢，这对我很有用