Redux Toolkit v2 可复用测试渲染函数适配方案咨询

针对你遇到的RTK v2两个核心问题——预加载状态必须定义所有reducer对应字段、PreloadedState类型不再从@reduxjs/toolkit导出，以下是适配后的解决方案：

关键修改点 #

• 类型迁移：PreloadedState类型现在需要从redux核心包导入，替代原@reduxjs/toolkit的导出
• 预加载状态初始化：不能再用空对象{}作为默认值，必须为每个reducer对应的状态字段提供初始值（可直接复用reducer自身的默认状态）

适配后的完整代码 #

import type { AppState, AppStore } from "@/store";
import uiReducer from "@/store/slices/ui-slice";
// 从redux核心包导入PreloadedState，替代原RTK的导出
import type { PreloadedState } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import type { RenderOptions } from "@testing-library/react";
import { render } from "@testing-library/react";
import React, { PropsWithChildren } from "react";
import { Provider } from "react-redux";

interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
  preloadedState?: PreloadedState<AppState>;
  store?: AppStore;
}

export function renderWithProviders(
  ui: React.ReactElement,
  {
    // 使用reducer的初始值构建默认预加载状态，满足RTK v2的严格校验
    preloadedState = {
      ui: uiReducer(undefined, { type: "@@INIT" })
    },
    store = configureStore({
      reducer: {
        ui: uiReducer,
      },
      preloadedState,
    }),
    ...renderOptions
  }: ExtendedRenderOptions = {}
) {
  function Wrapper({ children }: PropsWithChildren<{}>): React.JSX.Element {
    return <Provider store={store}>{children}</Provider>;
  }

  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
}

额外说明 #

• 如果你的store包含多个reducer，只需在默认preloadedState中添加对应字段，每个字段的值通过reducer(undefined, { type: "@@INIT" })获取初始状态即可
• 这种方式既满足RTK v2对预加载状态的类型校验要求，也能保证测试时初始状态与生产环境一致

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