Jest测试React自定义Hook时报ReferenceError: act is not defined错误如何解决

错误原因汇总 #

你遇到的act is not defined是表层错误，同时代码还存在其他逻辑问题会导致测试失败，所有问题如下：

• 未导入act工具，直接调用导致引用错误
• 自定义HookuseCounter错误返回JSX片段，没有返回状态和方法对象，测试无法拿到对应属性
• 减法方法名拼写不一致：实现中定义的是substract，测试中调用的是subtract
• renderHook调用方式错误，需传入返回Hook调用结果的函数，不能直接传入Hook本身
• useCounter实现中未导入useState、useCallback依赖，运行时会抛出未定义错误

修复后代码 #

useCounter 实现 #

import { useState, useCallback } from 'react'

export const useCounter = (initialValue = 0) => {
  const [counter, setCounter] = useState(initialValue)

  const add = useCallback((delta = 1) => setCounter(counter => counter + delta), [setCounter])
  // 统一拼写为标准写法subtract
  const subtract = useCallback((delta = 1) => setCounter(counter => counter - delta), [setCounter])

  // 返回状态与方法对象，不要返回JSX
  return {
    counter,
    add,
    subtract
  }
}

测试用例（适配React 18+，官方推荐方案） #

React 18开始@testing-library/react已经内置renderHook和act，无需额外安装@testing-library/react-hooks：

import { renderHook, act } from '@testing-library/react'
import { useCounter } from '@/hooks/useCounter'

describe('Testing useCounter hook', () => {
  it('should add +1 to counter', () => {
    const { result } = renderHook(() => useCounter())

    act(() => result.current.add())
    expect(result.current.counter).toBe(1)
  })

  it('should subtract 1 from counter', () => {
    const { result } = renderHook(() => useCounter())

    act(() => result.current.subtract())
    expect(result.current.counter).toBe(-1)
  })
})

测试用例（适配React 17及以下版本） #

如果使用旧版本React，保持使用@testing-library/react-hooks，补充导入act即可：

import { renderHook, act } from '@testing-library/react-hooks'
import { useCounter } from '@/hooks/useCounter'

describe('Testing useCounter hook', () => {
  it('should add +1 to counter', () => {
    const { result } = renderHook(() => useCounter())

    act(() => result.current.add())
    expect(result.current.counter).toBe(1)
  })

  it('should subtract 1 from counter', () => {
    const { result } = renderHook(() => useCounter())

    act(() => result.current.subtract())
    expect(result.current.counter).toBe(-1)
  })
})

内容的提问来源于stack exchange，提问作者l7_rd