Jest测试中RTK Query全局实例状态泄漏问题解决求助

问题根源在于Jest默认会共享模块级/全局变量的状态，第一个测试用例创建的notificationsHandler实例会保留到后续测试，导致依赖"首次初始化"逻辑的测试失败。以下是几个针对性的解决方案：

方案1：封装全局变量并提供重置接口 #

把全局变量封装到单独工具模块，同时暴露重置方法，在测试前后手动重置状态。

1.1 创建工具模块 #

// src/utils/notificationHandler.js
let handlerInstance = null;

export const getNotificationHandler = () => {
  if (!handlerInstance) {
    handlerInstance = new Notifications(); // 你的Notifications实例初始化逻辑
  }
  return handlerInstance;
};

// 仅用于测试的重置方法
export const resetNotificationHandler = () => {
  handlerInstance = null;
};

1.2 修改RTK Query切片 #

// src/api/notificationApi.js
import { getNotificationHandler } from '../utils/notificationHandler';

const notificationApi = createApi({
  reducerPath: 'notificationApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    fetchNotifications: builder.query({
      query: () => '/notifications',
      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
        const handler = getNotificationHandler();
        // 原有的handler使用逻辑
      },
    }),
  }),
});

1.3 在测试中重置状态 #

// src/api/notificationApi.test.js
import { resetNotificationHandler } from '../utils/notificationHandler';
import { notificationApi } from './notificationApi';
import { configureStore } from '@reduxjs/toolkit';

beforeEach(() => {
  // 每次测试前重置handler实例
  resetNotificationHandler();
  // 同时重置Redux store（如果需要）
  store = configureStore({
    reducer: {
      [notificationApi.reducerPath]: notificationApi.reducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(notificationApi.middleware),
  });
});

test('首次调用fetchNotifications时初始化handler', async () => {
  // 测试逻辑：验证handler被创建
});

test('后续调用fetchNotifications复用已有handler', async () => {
  // 测试逻辑：验证handler未被重复创建
});

方案2：避免全局变量，通过Redux Thunk传递实例 #

把Notifications实例放到Redux Thunk的extraArgument中，每个测试用例创建独立的store和实例，彻底隔离状态。

2.1 创建带extra参数的Store #

// src/store.js
export const createTestStore = () => {
  return configureStore({
    reducer: {
      [notificationApi.reducerPath]: notificationApi.reducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        thunk: {
          extraArgument: {
            notificationHandler: new Notifications(),
          },
        },
      }).concat(notificationApi.middleware),
  });
};

2.2 在RTK Query中使用extra参数 #

// src/api/notificationApi.js
const notificationApi = createApi({
  // ...其他配置
  endpoints: (builder) => ({
    fetchNotifications: builder.query({
      query: () => '/notifications',
      async onQueryStarted(arg, { dispatch, queryFulfilled, extra }) {
        // 直接使用extra中传入的handler，无需全局判断
        const handler = extra.notificationHandler;
        // 原有的handler使用逻辑
      },
    }),
  }),
});

2.3 测试中创建独立Store #

// src/api/notificationApi.test.js
import { createTestStore } from '../store';

beforeEach(() => {
  // 每次测试创建全新的store和handler实例
  store = createTestStore();
});

方案3：手动重置模块内全局变量（快速临时方案） #

如果不想重构代码，可以直接在RTK Query模块中暴露重置方法，测试时调用：

// src/api/notificationApi.js
let notificationsHandler = null;

const notificationApi = createApi({
  // ...其他配置
  endpoints: (builder) => ({
    fetchNotifications: builder.query({
      async onQueryStarted(arg) {
        if (!notificationsHandler) {
          notificationsHandler = new Notifications();
        }
        // 原逻辑
      },
    }),
  }),
});

// 测试专用重置方法
export const resetNotificationsHandler = () => {
  notificationsHandler = null;
};

测试中：

import { resetNotificationsHandler } from './notificationApi';

beforeEach(() => {
  resetNotificationsHandler();
});

为什么之前的方法没用？ #

• jest.clearAllMocks()：仅清除mock函数的调用记录，不会重置变量状态。
• jest.resetModules()：重置模块缓存，但如果模块已被导入，需要重新require才能生效；且对挂在window/global上的全局变量无效。

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