0

我有一个带有两个输入的表单。一个是文本框，另一个是材料 ui 自动完成。我正在使用 Yup 来验证它们。如果其中任何一个为空，则会出现错误文本。它们默认为空。在初始渲染中，预计会有两个错误。但是，当我填充输入时（一个通过键入，另一个通过选择），错误消息变为 1。但应该为 0，因为其中两个已填充。

    const title = screen.getByRole('textbox', {name: 'title'})
    const kind = screen.getByRole('textbox', {name: 'kind'})
    const errors = await screen.findAllByText('Can not be blank!')
    expect(errors).toHaveLength(2)

    userEvent.type(title, 'abc')
    userEvent.click(kind)
    const menuItem = await screen.findByText('first option')
    userEvent.click(menuItem)
    const newErrors = screen.queryAllByText('Can not be blank!')
    await waitFor(() => expect(newErrors).toHaveLength(0))

剩下的错误现在与 kind 有关。但是，如果我评论种类，有两个错误。如果我评论标题，仍然有 2 个错误。所以这让我觉得这可能是异步的问题。所以我几乎在所有地方都使用了 await 和 waitFor 但没有用。这里有什么问题？

4

1 回答 1

0

事情不是试图得到新的错误并断言该变量，在之后userEvent.click(menuItem)，我使用 waitForElementToBeRemoved 方法来断言元素是否被删除，如下所示：

await waitForElementToBeRemoved(() =>
      screen.queryAllByText('Can not be blank!')
    )

由于如果未删除元素并且我的测试当前正在通过此方法会引发错误，因此我认为它有效！

于 2021-09-14T10:11:00.667 回答