如何测试依赖useState Hook的组件？Jest模拟useState方法示例

要验证errorDescription有值时组件的显示效果，你可以直接模拟React的useState Hook，让它返回预设的错误值，再通过测试库查询组件内容进行验证。

核心思路 #

通过jest.mock覆盖React的useState，但保留React的其他原生功能（避免组件渲染异常），然后在测试用例中指定useState返回的状态值，这样组件就会直接使用你预设的errorDescription。同时要记得模拟组件依赖的自定义HookuseCustomHook，避免外部逻辑干扰测试。

完整测试代码 #

import React from 'react';
import { render, screen } from '@testing-library/react';
import SomeComponent from './SomeComponent';
import useCustomHook from './path-to-useCustomHook'; // 替换为你的自定义Hook实际路径

// 模拟自定义Hook，消除外部依赖影响
jest.mock('./path-to-useCustomHook', () => jest.fn(() => jest.fn()));

// 模拟React的useState，保留其他原生API
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn()
}));

describe('SomeComponent', () => {
  it('当errorDescription有值时，正确显示错误文本并隐藏加载圈', () => {
    // 让useState返回预设的错误文本和空的状态更新函数
    React.useState.mockReturnValue(['Error', jest.fn()]);

    // 渲染组件
    render(<SomeComponent />);

    // 验证错误文本已渲染
    expect(screen.getByText('Error')).toBeInTheDocument();

    // 验证加载圈未显示（用queryBy避免查询不到时抛出错误）
    expect(screen.queryByTestId('circular-progress')).toBeNull();
  });
});

关键细节说明 #

• 保留React原生功能：使用...jest.requireActual('react')可以确保除了useState外，React的其他API都保持原生行为，避免组件渲染失败。
• 模拟自定义Hook：因为组件中调用了useCustomHook，如果不模拟它，测试可能会被该Hook的内部逻辑（比如异步请求、状态更新）干扰，所以直接用jest.fn()模拟一个空实现即可。
• 查询元素的方式：查询存在的元素用getBy*，查询不存在的元素用queryBy*，后者在元素不存在时返回null，不会抛出错误，适合验证元素是否隐藏。

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