React Hooks 测试指南：testing-library/react-hooks-testing-library 基础用法-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00972/article/details/148505932

React Hooks 测试指南：testing-library/react-hooks-testing-library 基础用法

react-hooks-testing-library 🐏 Simple and complete React hooks testing utilities that encourage good testing practices. 项目地址: https://gitcode.com/gh_mirrors/re/react-hooks-testing-library

前言

在现代 React 开发中，Hooks 已经成为组件逻辑复用的主要方式。然而，如何有效地测试这些 Hooks 却是一个值得探讨的话题。本文将深入介绍如何使用 testing-library/react-hooks-testing-library 来测试基础 Hooks。

基础 Hook 测试

1. 渲染 Hook

让我们从一个简单的计数器 Hook 开始：

import { useState, useCallback } from 'react'

export default function useCounter() {
  const [count, setCount] = useState(0)
  const increment = useCallback(() => setCount((x) => x + 1), [])
  return { count, increment }
}

测试这个 Hook 的基本用法如下：

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

test('测试计数器初始状态', () => {
  const { result } = renderHook(() => useCounter())

  expect(result.current.count).toBe(0)
  expect(typeof result.current.increment).toBe('function')
})

这里有几个关键点需要注意：

renderHook 是测试库提供的核心方法
result.current 包含了 Hook 返回的最新值
测试结构与 Hook 的实际使用方式非常相似

2. 测试状态更新

仅仅测试初始状态是不够的，我们还需要验证 Hook 的行为：

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

test('测试计数器递增功能', () => {
  const { result } = renderHook(() => useCounter())

  act(() => {
    result.current.increment()
  })

  expect(result.current.count).toBe(1)
})

重要提示：

所有可能触发状态更新的操作都必须包裹在 act 中
这是为了模拟 React 在浏览器中的实际行为
忘记使用 act 会导致测试警告甚至失败

处理 Hook 参数

1. 初始值参数

许多 Hook 会接受参数来定制其行为。例如，我们的计数器可以接受初始值：

import { useState, useCallback } from 'react'

export default function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue)
  const increment = useCallback(() => setCount((x) => x + 1), [])
  return { count, increment }
}

测试带参数的 Hook：

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

test('测试自定义初始值的计数器', () => {
  const { result } = renderHook(() => useCounter(9000))

  act(() => {
    result.current.increment()
  })

  expect(result.current.count).toBe(9001)
})

2. 动态更新参数

当 Hook 依赖的参数可能变化时，我们需要测试这种场景：

import { useState, useCallback } from 'react'

export default function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue)
  const increment = useCallback(() => setCount((x) => x + 1), [])
  const reset = useCallback(() => setCount(initialValue), [initialValue])
  return { count, increment, reset }
}

测试参数更新的方法有两种：

方法一：使用变量重新渲染

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

test('测试重置功能响应初始值变化', () => {
  let initialValue = 0
  const { result, rerender } = renderHook(() => useCounter(initialValue))

  initialValue = 10
  rerender()

  act(() => {
    result.current.reset()
  })

  expect(result.current.count).toBe(10)
})

方法二：使用 initialProps 和 rerender

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

test('测试重置功能响应初始值变化', () => {
  const { result, rerender } = renderHook(({ initialValue }) => useCounter(initialValue), {
    initialProps: { initialValue: 0 }
  })

  rerender({ initialValue: 10 })

  act(() => {
    result.current.reset()
  })

  expect(result.current.count).toBe(10)
})

两种方法的比较：

第一种方法更直接，适合简单场景
第二种方法更结构化，适合复杂参数或多个参数的情况
第二种方法还能避免变量作用域问题（见下文）

处理副作用清理

当测试涉及副作用的 Hook 时，正确的清理方式尤为重要：

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

test('测试副作用清理', () => {
  const { rerender } = renderHook(
    ({ id }) => {
      useEffect(() => {
        sideEffect.start(id)
        return () => {
          sideEffect.stop(id)
        }
      }, [id])
    },
    {
      initialProps: { id: 'first' }
    }
  )

  rerender({ id: 'second' })

  expect(sideEffect.get('first')).toBe(false)
  expect(sideEffect.get('second')).toBe(true)
})

关键点：