如何仅mock自定义React hook返回的单个值同时保留其他方法正常工作

问题原因 #

你当前的写法是全量重写了useTodos的实现，仅返回todos字段，自然缺失了addTodo、removeTodo方法；如果仅用jest.fn()模拟这两个方法，也没有绑定原有的状态更新逻辑，无法正常运行。

通用解法：复用原始Hook实现，仅覆写初始值 #

通过jest.requireActual导入原始的Hook模块，在mock时直接调用原始实现并传入你需要的初始todos即可，所有原生逻辑都会完整保留：

jest.mock('hooks/useTodos', () => {
  const originalModule = jest.requireActual('hooks/useTodos')
  return {
    ...originalModule,
    useTodos: () => originalModule.useTodos(['Wake up', 'Go to work'])
  }
})

单测试用例临时修改方案 #

如果不需要全局mock，只想在单个测试用例里修改初始todos，可以用jest.spyOn临时重写实现，测试结束后恢复原始逻辑，不会影响其他用例：

import * as useTodosModule from 'hooks/useTodos'

describe('TodoList 测试', () => {
  it('正确渲染初始todo列表', () => {
    const useTodosSpy = jest.spyOn(useTodosModule, 'useTodos')
      .mockImplementation(() => useTodosModule.useTodos(['Wake up', 'Go to work']))
    
    // 此处写组件渲染、断言等测试逻辑
    
    useTodosSpy.mockRestore()
  })
})

更优无Mock方案（适配对应组件设计） #

如果你的TodoList组件支持接收初始todo列表作为props，完全不需要mock自定义Hook，直接在测试时给组件传入对应初始值即可，这种测试方式更贴合真实使用场景，可维护性更高。

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