如何在Jest中mock Chakra UI的createStandaloneToast及isActive方法

核心问题 #

你当前的mock只将createStandaloneToast的返回值设置为普通mock函数，没有挂载业务代码中用到的isActive方法，所以无法控制这部分逻辑的返回值，调整方案如下：

实现步骤 #

1. 调整全局mock结构 #

由于Chakra UI的createStandaloneToast返回的toast实例本身是可调用函数，同时函数上挂载了isActive实例方法，你需要让mock结构和原生结构对齐：

// 单独声明两个mock函数，方便后续单测中动态修改返回值
const mockIsActive = jest.fn();
const mockToastFn = jest.fn();
// 给toast调用函数挂载isActive方法
mockToastFn.isActive = mockIsActive;

jest.mock('@chakra-ui/react', () => {
  return {
    ...jest.requireActual('@chakra-ui/react'),
    createStandaloneToast: () => mockToastFn,
  };
});

2. 单测中按需控制isActive返回值 #

根据测试场景需要，直接修改mockIsActive的返回值即可覆盖不同分支逻辑：

测试场景：同状态码错误首次出现，正常弹出toast

test('首次出现指定状态码错误时弹出toast', () => {
  // 模拟当前无对应id的活跃toast
  mockIsActive.mockReturnValue(false);
  // 此处替换为你触发axios拦截器的逻辑
  runYourAxiosInterceptor({ status: 403 });
  // 验证toast调用符合预期
  expect(mockToastFn).toHaveBeenCalledWith(expect.objectContaining({
    id: 403,
    status: 'error'
  }));
});

测试场景：同状态码错误重复出现，不重复弹出toast

test('同状态码错误重复出现时不弹出重复toast', () => {
  // 模拟当前已有对应id的活跃toast
  mockIsActive.mockReturnValue(true);
  // 触发axios拦截器逻辑
  runYourAxiosInterceptor({ status: 403 });
  // 验证toast未被重复调用
  expect(mockToastFn).not.toHaveBeenCalled();
});

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