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

Question

我编写了一个玩笑测试来涵盖正在调用的 onBlur 事件。我正在使用 react-testing-library 和 material-ui。

这里是测试代码：

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')  
})

以及我要断言的代码

  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)
  }

我试图设置一个 codesandbox 但不幸的是，这失败了，并出现了关于将测试包装在 act 块中的错误。这不会发生在我的本地环境中。

如何才能成功完成此测试？

Answer 1

您应该 await 要调用的方法：

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

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

Jest fails to call spy on async function, but function is called in browser console

javascript

jestjs

react-testing-library