如何使用Jest测试基于hooks的React函数式组件state？

首先明确：函数式组件的内部状态是通过Hook封装的私有属性，没有类组件那样直接暴露的state实例属性可以直接读取，测试时更推荐遵循「测试组件行为而非内部实现」的原则完成验证，常用两种实现方案： #

方案1：通过渲染输出验证（官方推荐） #

这是最符合React测试最佳实践的方式，不需要访问内部状态，直接验证状态对应的渲染结果即可。
假设你的gifts状态会被渲染为列表项，测试代码示例如下：

import { render, screen } from '@testing-library/react';
import YourComponent from './YourComponent';

test('组件初始化时gifts为空数组', () => {
  render(<YourComponent />);
  // 验证没有渲染任何礼品项
  expect(screen.queryAllByClassName('gift-item')).toHaveLength(0);
  // 如果存在空状态提示，也可以直接验证提示存在
  expect(screen.getByText('暂无礼品数据')).toBeInTheDocument();
});

方案2：直接验证Hook状态 #

如果你的状态逻辑抽离为了自定义Hook，或者需要单独验证状态初始值，可以使用renderHook API完成测试：

import { renderHook } from '@testing-library/react';
// 假设gifts状态封装在useGiftList自定义Hook中
import useGiftList from './useGiftList';

test('Hook初始化时gifts为空数组', () => {
  const { result } = renderHook(() => useGiftList());
  expect(result.current.gifts).toEqual([]);
});

不推荐强行读取组件内部未暴露的状态值，会导致测试和实现强耦合，只要组件的行为输出符合预期，内部状态的具体实现不需要在测试中感知。

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