Jest中mock React useState出现类型不兼容错误求助

这个错误是因为你的mock函数签名和React useState的官方类型定义不匹配导致的，以下是几种类型安全的解决方式：

方式一：泛型+明确Dispatch类型（推荐） #

先导入React的类型定义，再给mock的setState指定正确类型，同时用泛型适配任意初始化值类型：

import React, { Dispatch, SetStateAction } from 'react';

// 定义符合React类型规范的mock setState函数
const mockSetState = jest.fn() as Dispatch<SetStateAction<any>>;

// 对useState进行Spy并实现mock
const useStateSpy = jest.spyOn(React, 'useState');
useStateSpy.mockImplementation(<T>(init: T) => [init, mockSetState]);

如果需要针对特定类型（比如字符串）做更严格的类型约束，可以这样写：

const mockSetState = jest.fn() as Dispatch<SetStateAction<string>>;
useStateSpy.mockImplementation((init: string) => [init, mockSetState]);

方式二：类型断言快速修复 #

如果不需要严格的类型检查，可以直接用类型断言让TS忽略类型不匹配：

const useStateSpy = jest.spyOn(React, 'useState');
useStateSpy.mockImplementation((init) => [init, jest.fn()] as [any, React.Dispatch<any>]);

核心原因说明 #

React的useState类型签名是function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]，你的原代码没有匹配这个签名：

• 没有正确定义setState的Dispatch类型
• mock函数的返回值类型没有符合[状态值, 更新函数]的严格元组类型

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