在 reducerPath 错误的 RTK-Query API 中间件 - 运行 RTL 测试时“仅”答案

【问题标题】：Middleware for RTK-Query API at reducerPath Error - "only" while running RTL tests在 reducerPath 错误的 RTK-Query API 中间件 - 运行 RTL 测试时“仅”
【发布时间】：2022-11-11 11:13:51
【问题描述】：

我正在尝试将我的 redux 存储迁移到 RTK 和 RTK 查询 - 并使我的 RTL 测试与它一起工作

我打算逐步重写 - 将每个 reducer 1 逐 1 转换。

我重新创建了我在应用程序中使用的商店 - 用 configureStore 替换 createStore - 并添加了用于 api 处理的中间件，如下所示：

import { vendorPaymentsApiSlice } from './vendorPaymentsAPISlice';

const rootReducer = combineReducers({
   users: userReducer,
   [vendorPaymentsApiSlice.reducerPath]: vendorPaymentsApiSlice.reducer
})

//vendorPaymentsApiSlice.reducerPath is set to "vendorpaymentsApi"

const store = configureStore({
  reducer: rootReducer,
  middleware: [
    ...getDefaultMiddleware(),
    sagaMiddleware,
    vendorPaymentsApiSlice.middleware,
  ],
});

此设置在实际应用程序中运行良好。 api 的中间件链接按预期工作。

对于我的测试，我使用了一个模拟商店——它用 mockHistory 替换了历史，但它几乎是相同的代码——相同的 rootReducer 和相同的中间件数组。

在我的测试中，我为 api 调用编写了一个 msw 拦截器 - 拦截器被调用：

但一旦发生这种情况 - 我收到此错误消息：

Warning: Middleware for RTK-Query API at reducerPath "vendorpaymentsApi" has not been added to the store.
Features like automatic cache collection, automatic refetching etc. will not be available.

因此 - 来自 api 的 redux 中的数据设置失败。

在阅读this 并尝试过之后，我尝试了许多添加中间件的变体

getDefaultMiddleware().concat([
    sagaMiddleware,
    vendorPaymentsApiSlice.middleware,
  ])

但它仍然无法正常工作。

想要一些帮助来理解为什么这个 api 的链接没有发生在测试中。

非常感谢您阅读本文

【问题讨论】：

标签： reactjs api redux react-testing-library redux-toolkit

【解决方案1】：

设置中间件的正确方法是

  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(sagaMiddleware).concat(vendorPaymentsApiSlice.middleware),

但老实说，我不是 100% 确定这是否是你的问题。你真的在你的测试中使用这个商店（你应该！）而不是某种模拟商店？

您已为 api 分配了 "vendorpaymentsApi" 的 reducerPath，然后将其作为 vpApi 安装在您的商店中。将reducerPath 选项更改为vpApi 或将vpApi: vpApi.reducer 更改为vendorpaymentsApi: vpApi.reducer

【讨论】：

感谢您的回答 - 但我有 vpApi 只是为了掩盖我的原始代码，我已经更新了我的代码示例以显示我编写的确切代码。我到处都在使用对 reducerPath 的引用-
我编辑了一些关于中间件的东西
我正在为我的测试重新创建模拟商店——但也为了重新创建模拟商店——我使用的是与商店中完全相同的代码。模拟商店的原因是我用模拟历史代替历史
我能够找到这个问题的答案 - 感谢您的帮助

【解决方案2】：

我试图在一个更简单的 repo here 中重新创建这个错误

问题不在配置存储中的中间件声明中，而是在正在使用的另一种模式中。

模式：“而不是像here 描述的那样在测试 redux 连接组件时每次都创建一个新存储 - 使用存储单例并调度一个操作以将存储重置为从测试传递的初始数据”

如图this file

但问题是我忘记将 api reducer 设置为用作基础的默认空状态 - 在浅合并传递的数据之前：

我在其中省略了导致此错误的“api”键 - 一旦我将其添加回来 - 错误就消失了。

【讨论】：