React测试报错：Cannot read properties of undefined (reading 'reducerPath')

问题场景 #

使用React Testing Library测试PostCard组件时，测试套件无法运行，抛出错误：

TypeError: Cannot read properties of undefined (reading 'reducerPath')

错误定位到store.js文件中[userApi.reducerPath]: userApi.reducer这一行。

核心原因 #

该错误表明创建Redux Store时，userApi变量为undefined，本质是RTK Query的API实例未被正确初始化或导入。

解决方案 #

1. 检查userApiSlice的导出与导入

确保userApiSlice文件正确导出创建好的API实例：

// userApiSlice.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// 正确创建并导出API实例
export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    // 你的端点定义
  }),
});

// 确保导出方式与导入匹配
export default userApi;

同时检查store.js中的导入语句是否对应：

// store.js
import userApi from './features/user/userApiSlice'; // 匹配导出方式

2. 测试环境中正确配置Redux Provider

测试时需用Redux Provider包裹组件，且使用包含RTK Query中间件的测试专用Store，避免直接复用生产环境Store：

// PostCard.test.js
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import userApi from './features/user/userApiSlice';
import PostCard from './PostCard';

// 创建测试专用Store
const testStore = configureStore({
  reducer: {
    [userApi.reducerPath]: userApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(userApi.middleware),
});

test('renders PostCard component', () => {
  render(
    <Provider store={testStore}>
      <PostCard />
    </Provider>
  );
  // 你的断言逻辑
});

3. 排查循环导入问题

若store.js与userApiSlice之间存在循环引用（如store导入userApi，userApi又导入store），会导致初始化时userApi为undefined。解决方式：

• 确保RTK Query的API实例不直接依赖Store
• 拆分代码结构，消除循环引用

4. 验证RTK Query版本兼容性

确保@reduxjs/toolkit与@reduxjs/toolkit/query/react版本一致，避免版本不匹配导致API实例创建失败：

npm update @reduxjs/toolkit

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