如何在Jest中模拟React Hook的setter（bound dispatchAction函数）

云原生阿岚

2026-8-15

解决方法

问题根源

useState返回的setter是React内部生成的绑定了dispatchAction的专属函数，而你用jest.fn()创建的是一个独立的mock函数，二者的引用完全不同，所以Jest无法判定它们相等。

两种可行方案

1. 只验证函数存在（简单场景）

如果不需要后续验证setter的调用逻辑，只需确认setSelected作为函数被传递，可以用expect.any(Function)替代jest.fn()：

expect(MyComponent).toHaveBeenCalledWith(
  expect.objectContaining({
    // ... 其他需要匹配的props
    setSelected: expect.any(Function)
  })
);

这种方式不依赖具体的函数引用，只要传递的是函数就会通过测试，更符合测试的核心目的——验证props传递逻辑，而非React内部实现细节。

2. Mock useState 控制返回的setter（复杂场景）

如果需要后续验证setter的调用次数、参数等行为，可以直接mock React的useState，让它返回你自定义的mock函数：

import React from 'react';

// 先mock useState，保留React其他原有功能
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn()
}));

it("should call MyComponent with the correct props", () => {
  // 定义自己的mock setter
  const mockSetSelected = jest.fn();
  // 让useState这次调用返回我们的mock函数
  React.useState.mockReturnValueOnce([null, mockSetSelected]);

  renderComponent(args);
  
  expect(MyComponent).toHaveBeenCalledWith({
    // ... 其他props
    setSelected: mockSetSelected
  });

  // 后续还可以验证setter的调用
  // expect(mockSetSelected).toHaveBeenCalledWith(xxx);
});

这种方式让useState返回的setter和测试预期完全一致，既通过了props匹配，也支持后续的行为验证。