如何等待测试库中按钮的禁用状态发生更改？

Question

我有一个 React 组件，其中一个输入字段和一个按钮在一开始就被禁用。如果用户向输入字段提供的输入经过 API 验证（在输入字段中输入任何内容后调用该 API），则此按钮的状态（已禁用）会发生变化。

我正在通过提供有效输入进行测试，但它需要等到 API 调用完成，所以基本上我想测试，如果提供有效输入，按钮在我的测试中是否重新启用。

我通过以下代码执行此操作：

userEvent.type(getByRole("textbox"), "HELLO");
await waitFor(() => expect(getByTestId("my-btn")).not.toBeDisabled());

但即使输入有效，它也不起作用

Answer 1

您可以按照文档中的说明waitFor增加超时：

await waitFor(() => expect(getByTestId("my-btn")).not.toBeDisabled(), {
  timeout: 5000,
});

超过 5000 您可能还需要增加 jest timeout。