如何使用Jest的mockImplementation正确模拟链式函数调用？

问题原因 #

你的实现存在两处核心问题：

• 拼写错误：方法名getAggreegation多了一个字母e，和实际调用的getAggregation不匹配
• 链式调用的每一步返回的是包含下一级方法的对象，而非直接返回下一级方法本身：byId()执行后需要返回带有getAggregation方法的对象，getAggregation()执行后需要返回带有setVisiblePagesCount方法的对象

正确实现 #

基础版本

如果仅需要实现链式调用不需要后续校验调用参数，可以直接用如下写法：

controller.byId = jest.fn(() => ({
  getAggregation: jest.fn(() => ({
    setVisiblePagesCount: jest.fn()
  }))
}))

可断言版本

如果需要后续验证每个方法的调用参数、调用次数，可以把mock实例单独提取出来：

// 单独定义各层级mock函数，方便后续断言
const mockSetVisiblePagesCount = jest.fn()
const mockGetAggregation = jest.fn(() => ({
  setVisiblePagesCount: mockSetVisiblePagesCount
}))
const mockById = jest.fn(() => ({
  getAggregation: mockGetAggregation
}))

controller.byId = mockById

// 执行业务代码后可做如下断言
expect(mockById).toHaveBeenCalledWith("ABC")
expect(mockGetAggregation).toHaveBeenCalledWith("EFG")
expect(mockSetVisiblePagesCount).toHaveBeenCalledWith(controller.test())

内容的提问来源于stack exchange，提问作者Soumya Kanti Naskar