在开玩笑地断言测试之前，如何等待事件发生？

Question

我有一个包含以下事件的 AntD 表单：

<Form
    form={form}
    onFieldsChange={(field, allFields) => {
        //return true for each field, that does no longer equal its default value
        const dirtyFields = allFields.filter(fld => {
            return fld.touched
        })
        setIsDirty(dirtyFields.length > 0)
    }}
>
</Form>

规则是，如果未触及任何字段，则应禁用提交按钮。现在，如果我手动测试它，这种方法就可以正常工作。但是，我无法在测试中复制它。

此时，这是我正在进行的测试：

it('should enable submit button, when any field is touched', async () => {
    act(() => {
        render(<NewEmployeeModal
            visible={true}
            handleClose={() => { }}
        />)
    })

    const input = await screen.getByTestId('employeeLastNameInput')
    expect(input).not.toBeNull()

    await userEvent.type(input, 'SomeRandomLastName', { delay: 20 })

    //now the button should be enabled
    let submitButton = await waitFor(async () => (await screen.findByText("Speichern")).closest('button'))
    expect(submitButton).not.toBeDisabled()
})

我在输入字段中输入姓氏，每个字符之间有 20 毫秒的延迟。在此之后，我正在检索提交按钮并希望它被启用。

失败，出现以下错误：

Tests concerning the touched or dirty state › should enable submit button, when any field is touched

expect(element).not.toBeDisabled()

Received element is disabled:
  <button class="ant-btn ant-btn-primary" disabled="" form="emp-form-new-employee" type="submit" />

  87 |         let submitButton = await waitFor(async () => (await screen.findByText("Speichern")).closest('button'))
  88 |
> 89 |         expect(submitButton).not.toBeDisabled()
     |                                  ^
  90 |
  91 |     })
  92 | })

我不清楚为什么提交按钮此时未启用。所以问题是：为什么它不起作用，我该如何改进它，以便它复制所需的行为？

Answer 1

根据 Jonrsharpe 链接的文档，findBy 已经包含 WaitFor，所以我需要做的就是：

//now the button should be enabled
expect(await screen.findByText("Speichern")).not.toBeDisabled()

在开玩笑地断言测试之前，如何等待事件发生？

How can I wait for an event to happen before asserting a test in jest?

reactjs

jestjs

react-testing-library