React 测试库 waitFor() 返回 null

Question

我正在测试我的登录表单的提交事件是否被拒绝。如果用户只是提交了表单而没有填写用户名和密码，则必须显示两条错误消息并且它应该通过测试。但测试结果却相反：显示用户名和密码错误信息为null。我尝试使用setTimeout()，因为onSubmit 事件由于axios 是异步的，但它仍然没有通过测试。我将waitFor() 实用程序用于异步提交事件的方式有什么问题吗？

it('Should render username and password error messages when both inputs are blank', () => {
    const { getByTestId, queryByTestId } = render(<Index />)

    fireEvent.submit(getByTestId('form'))

    expect(getByTestId('submit-button').disabled).toBeTruthy()

    setTimeout(async () => {
        expect(getByTestId('submit-button').disabled).toBeFalsy()

        const usernameError = await waitFor(() => queryByTestId('username-error'))
        expect(usernameError).toBeInTheDocument()

        const passwordError = await waitFor(() => queryByTestId('password-error'))
        expect(passwordError).toBeInTheDocument()
    }, 0)
})

Answer 1

对测试进行了一些更改，可能会解决此问题。请在下面的代码中找到它们作为 cmets

// The first is adding async to the callback of your `it` so you don't have to use a timeout
it('Should render username and password error messages when both inputs are blank', async () => {
    const { getByTestId, findByTestId, queryByTestId } = render(<Index />)

    expect(getByTestId('submit-button').disabled).toBeTruthy()

    fireEvent.submit(getByTestId('form'))

    // Here we can use waitFor which waits until the promise triggered by the last fireEvent finishes.
    await waitFor(() => {
        expect(getByTestId('submit-button').disabled).toBeFalsy()
    })

    // Finally, you should be able to just use getByTestId to locate the elements you need, and given that the promises are resolved, they should be in the document
    expect(getByTestId('username-error')).toBeInTheDocument()
    expect(getByTestId('password-error')).toBeInTheDocument()
})

如果这些建议不起作用，请同时复制正在测试的组件的代码