测试RTK Query时遇preloadedState类型错误：预期对象却传入数组

RTK Query 生成的 API 切片（如你的postsSlice）对应的 Redux state 是固定结构的对象，必须包含queries、mutations、provided、subscriptions、config这些键，用来维护请求缓存、状态等核心信息。你直接将数组initialPosts赋值给postsSlice对应的 preloadedState，类型完全不匹配，因此触发报错。

你需要构造符合 RTK Query 要求的 preloadedState 结构，将测试数据放到queries字段中对应查询的缓存条目里。

方案1：构造正确的 preloadedState 结构 #

对于无参数的getPosts查询，它的默认缓存键是getPosts(undefined)，你需要把测试数据放到这个键对应的缓存条目中：

test("Can use preloadedState", () => {
  const initialPosts = [
    {
      id: 1,
      body: "Lorem ipsum",
    },
  ];

  // 构造符合RTK Query规范的state结构
  const rtkQueryPreloadedState = {
    queries: {
      // 无参数getPosts的缓存键
      'getPosts(undefined)': {
        status: 'fulfilled',
        data: initialPosts,
        endpointName: 'getPosts',
        queryHash: 'getPosts(undefined)',
        fulfilledTimeStamp: Date.now(),
      }
    },
    mutations: {},
    provided: {},
    subscriptions: {},
    config: {}
  };

  renderWithProviders(<GenericList />, {
    preloadedState: {
      postsSlice: rtkQueryPreloadedState,
    },
  });

  const loremIpsum = screen.getByText(/lorem ipsum/i);
  expect(loremIpsum).toBeInTheDocument();
});

验证缓存键（可选）

如果不确定查询的缓存键，可以打开 Redux DevTools，正常运行应用并触发getPosts查询，查看postsSlice下queries中的键值，直接复制对应键即可。

方案2：Mock 查询结果（更简洁） #

如果只是想测试组件在有数据时的渲染效果，也可以直接在测试中 mock RTK Query 的查询钩子，无需手动构造复杂的 preloadedState：

// 在测试文件顶部mock API切片
jest.mock('../features/postsSlice', () => {
  const originalModule = jest.requireActual('../features/postsSlice');
  return {
    ...originalModule,
    useGetPostsQuery: () => ({
      data: [{ id: 1, body: "Lorem ipsum" }],
      isLoading: false,
      isError: false,
    }),
  };
});

test("Can render with mock data", () => {
  renderWithProviders(<GenericList />);

  const loremIpsum = screen.getByText(/lorem ipsum/i);
  expect(loremIpsum).toBeInTheDocument();
});

RTK Query 的缓存机制和普通 Redux slice 完全不同，它的 state 结构是内部维护的专用格式，不能像普通 slice 那样直接传入原始数据数组。必须遵循它的缓存结构规范，或者通过 mock 查询钩子的方式来模拟数据返回。

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