使用 renderHooks 测试 window

Question

我有这个自定义挂钩：

import { useEffect } from 'react'

const useBeforeUnload = () => {
  useEffect(() => {
    const handleBeforeUnload = ev => {
      console.log('Test')
    }

    window.addEventListener('beforeunload', handleBeforeUnload)

    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
  }, [])
}

export default useBeforeUnload

我正在尝试进行一个简单的测试以检查 window.addEventListener 是否被调用：

import { renderHook } from '@testing-library/react-hooks'
import useBeforeUnload from './useBeforeUnload'

const spy = jest.fn()

delete window.addEventListener
window.addEventListener = spy

describe('useBeforeUnload', () => {
  describe('When the hook is initialised', () => {
    beforeEach(() => {
      renderHook(() => useBeforeUnload())
    })

    test('It should register the correct event listener', () => {
      expect(spy).toHaveBeenCalledTimes(1)
    })
  })
})

但是说监听器被调用了6次总是失败？？？

Answer 1

这是因为 react-dom 也在添加事件处理程序（用于错误事件），这些处理程序会增加您的调用次数

你可以做的一件事是断言你想要它添加什么而不是多少次

expect(spy).toHaveBeenCalledWith("beforeunload",expect.anything());

使用 renderHooks 测试 window

Testing window with renderHooks

reactjs

jestjs

react-testing-library