使用RTK Query+MSW+Vitest测试React组件时的报错问题

问题1：测试时抛出 { status: 'FETCH_ERROR', error: 'TypeError: fetch failed' } #

原因 #

• 测试复用全局Redux Store实例，缓存残留导致请求未正常触发
• MSW请求拦截配置或Vitest环境未正确模拟浏览器上下文

修复步骤 #

1. 每个测试创建独立的Redux Store
   避免全局Store的缓存干扰，在测试文件中动态生成新Store：

   // App.test.jsx
   import { configureStore } from "@reduxjs/toolkit";
   import { testApi } from "../../services/test";
   
   // 封装测试用Store创建函数
   const createTestStore = () => {
     return configureStore({
       reducer: {
         [testApi.reducerPath]: testApi.reducer,
       },
       middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware().concat(testApi.middleware),
     });
   };
   
   // 修改wrapper使用新Store
   const wrapper = (children) => {
     return <Provider store={createTestStore()}>{children}</Provider>;
   };
   

2. 配置Vitest为jsdom环境
   在vite.config.js中明确指定测试环境，模拟浏览器上下文：

   export default defineConfig({
     plugins: [react()],
     test: {
       environment: 'jsdom',
       setupFiles: './src/testSetup.js',
       globals: true,
     },
   })
   

3. 验证MSW拦截有效性
   将testSetup.js中的server.listen配置改为onUnhandledRequest: "error"，未被拦截的请求会直接报错，帮助定位问题：

   beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
   

问题2：相对路径baseUrl测试时抛出 TypeError: Failed to parse URL from /api/test?page=1&limit=10 #

原因 #

Node.js环境的fetch API不支持相对URL（浏览器会自动基于当前页面URL补全，但测试环境无此上下文），必须提供绝对URL。

修复步骤 #

1. 用环境变量区分环境baseUrl
   在services/apiSetup.js中通过环境变量动态设置baseUrl：

   import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
   
   // 开发环境用相对路径，测试/生产用绝对路径
   const baseUrl = import.meta.env.VITE_API_BASE_URL || "/api";
   
   export const emptyApi = createApi({
     baseQuery: fetchBaseQuery({ baseUrl }),
     tagTypes: ["test"],
     endpoints: () => ({}),
   });
   

2. 添加测试环境变量文件
   在项目根目录创建.env.test文件，指定测试用的绝对baseUrl：

   VITE_API_BASE_URL=http://localhost:3000
   

额外验证点 #

• 检查MSW Handler的URL是否与RTK Query生成的请求URL路径一致（查询参数不影响匹配）
• 确保测试前MSW Server已正确启动，测试后重置Handlers

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