使用jest.mock模拟zustand模块时出现TypeError: _zustand.default不是函数

你的Zustand Jest Mock代码如下：

jest.mock("zustand", async () => {
  const originalModule = await jest.requireActual("zustand");
  const create = (createState) => {
    const store = originalModule((set) => {
      const state = createState(set);
      return {
        ...state,
        count: 5,
      };
    });
    return store;
  };
  return { __esModule: true, default: create };
});

运行测试时触发错误：TypeError: (0 , _zustand.default) is not a function，错误发生在store文件创建store的环节。

问题原因 #

你错误地将jest.requireActual获取到的整个模块当成函数调用，但Zustand的ES模块中，真正的create函数是挂在模块的default属性上的，直接调用originalModule(...)会导致类型错误。

修正后的代码 #

jest.mock("zustand", async () => {
  const originalModule = await jest.requireActual("zustand");
  const create = (createState) => {
    // 调用originalModule.default获取真正的create函数
    const store = originalModule.default((set) => {
      const state = createState(set);
      return {
        ...state,
        count: 5,
      };
    });
    return store;
  };
  return { __esModule: true, default: create };
});

适配命名导入场景 #

如果你的项目中使用命名导入方式引入Zustand（比如import { create } from 'zustand'），需要在mock中同时导出命名的create成员：

jest.mock("zustand", async () => {
  const originalModule = await jest.requireActual("zustand");
  const create = (createState) => {
    const store = originalModule.default((set) => {
      const state = createState(set);
      return {
        ...state,
        count: 5,
      };
    });
    return store;
  };
  return { 
    __esModule: true, 
    default: create,
    create // 导出命名create，适配命名导入
  };
});

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