如何在使用redux-mock-store 1.5.4时从redux-thunk 2迁移到3？

问题背景 #

在redux-thunk 2.x.x与redux-mock-store 1.5.4组合下，以下代码可正常运行：

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const mockStore = configureMockStore([thunk]);

但升级redux-thunk至3.x.x后，会触发TypeScript类型错误：

Type 'typeof import("/Users/user/Development/web-client/node_modules/redux-thunk/dist/redux-thunk")' is not assignable to type 'Middleware<{}, any, Dispatch<AnyAction>>'.
  Type 'typeof import("/Users/user/Development/web-client/node_modules/redux-thunk/dist/redux-thunk")' provides no match for the signature '(api: MiddlewareAPI<Dispatch<AnyAction>, any>): (next: Dispatch<AnyAction>) => (action: any) => any'.ts(2322)

根源是redux-thunk v3重构了类型定义，从直接导出中间件实例改为导出创建中间件的工厂函数，而redux-mock-store 1.5.4的类型系统未适配这一变化。

兼容方案 #

方案1：调用thunk工厂函数生成中间件实例 #

redux-thunk v3的默认导出是一个工厂函数，需要执行它来得到符合要求的中间件实例。修改代码如下：

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

// 执行thunk工厂函数获取中间件
const mockStore = configureMockStore([thunk()]);

如果你的项目使用了thunk的额外参数（extraArgument），可以传入配置对象：

const extraArg = { api: myApiClient };
const mockStore = configureMockStore([thunk({ extraArgument: extraArg })]);

方案2：添加类型断言（可选，用于类型报错仍存在的场景） #

如果方案1仍触发类型错误，可以手动添加类型断言强制适配redux-mock-store的类型要求：

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import type { Middleware, Dispatch, AnyAction } from 'redux';

const thunkMiddleware = thunk() as Middleware<{}, any, Dispatch<AnyAction>>;
const mockStore = configureMockStore([thunkMiddleware]);

注意事项 #

• 官方确实不推荐使用mock store测试Redux逻辑，更建议直接测试thunk函数本身或使用Redux Toolkit的configureStore配合真实中间件进行集成测试。但如果当前必须完成包升级，上述方案可临时解决兼容问题。

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