使用jest.mocked模拟selector factory时遇类型错误的解决求助

问题原因 #

makeSelectItemsByCategory返回的是Reselect的OutputSelector类型，它不只是一个接收state的函数，还附带了clearCache等专属方法。你当前mock的只是普通空函数，不符合TypeScript对OutputSelector类型的结构要求，因此抛出类型错误。

解决方案 #

方案1：模拟完整的OutputSelector结构 #

直接创建符合类型要求的对象，包含函数调用逻辑和必要属性：

it('does stuff', () => {
  // 构造符合OutputSelector类型的模拟对象
  const mockSelector = Object.assign(
    () => [], // 核心逻辑：返回空数组
    { clearCache: jest.fn() } // 补充OutputSelector要求的属性
  );

  jest.mocked(makeSelectItemsByCategory).mockReturnValueOnce(mockSelector);
  // 后续测试逻辑...
});

方案2：使用类型断言跳过类型检查 #

如果不需要模拟clearCache等方法，可用类型断言告知TypeScript忽略类型差异：

it('does stuff', () => {
  jest.mocked(makeSelectItemsByCategory).mockReturnValueOnce(
    (() => []) as unknown as ReturnType<typeof makeSelectItemsByCategory>
  );
  // 后续测试逻辑...
});

ReturnType<typeof makeSelectItemsByCategory>会自动推导原函数的返回类型，确保断言的准确性。

方案3：用Reselect创建真实Selector来Mock #

如果希望mock的selector行为更贴近真实场景，可直接用createSelector生成匹配类型的selector：

import { createSelector } from '@reduxjs/toolkit'; // 或直接引入reselect库

it('does stuff', () => {
  // 创建返回空数组的真实selector
  const mockSelector = createSelector(
    () => [],
    () => []
  );

  jest.mocked(makeSelectItemsByCategory).mockReturnValueOnce(mockSelector);
  // 后续测试逻辑...
});

这种方式完全匹配原selector的类型，不会触发类型错误，同时保留了Reselect selector的所有属性。

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