Jest 无法在异步函数上调用 spy，但在浏览器控制台中调用了函数

Question

I've written a jest test to cover an onBlur event being called. Im using react-testing-library and material-ui.

Here is the test code:

test('fires onBlur handler', async () => {
  const spy = jest.fn()
  const { getByPlaceholderText } = render(
    <FormEmailAsync placeholder={'Your Email'} onBlurred={data => spy(data)} />
  )
  const fld = getByPlaceholderText('Your Email')
  expect(fld)
  userEvent.type(fld, 'test@gmail.com')
  expect(spy).not.toHaveBeenCalled()
  fireEvent.blur(fld)
  expect(spy).toHaveBeenCalledTimes(1)
  expect(spy).toHaveBeenCalledWith('test@gmail.com')  
})

And the code I am trying to assert on

  const [theState, asyncFunc] = useAsyncFn(async value => {
    const returnedSchema = await schema.validate(value)
    return returnedSchema
  }, [])

  const onBlurFunc = async (name, event) => {
    let returnFromAsync = await asyncFunc(event)
    console.log(returnFromAsync)
    onBlurred(returnFromAsync)
  }

I've attempted to setup a codesandbox but unfortunately this is failing with an error about wrapping the tests in an act block. This does not occur in my local environment.

How do I get this test to complete successfully?

Answer 1

您应该await调用该方法：

await waitFor(() => expect(spy).toHaveBeenCalledTimes(1))