如何在Jest测试中禁用Redux-Toolkit的「非可序列化值」警告？

可能的原因 #

• 测试中使用的Store实例未同步应用serializableCheck: false配置
• 测试环境下Redux-Toolkit默认中间件的行为与开发环境存在差异
• 项目中其他中间件或配置覆盖了序列化检查设置

解决方案 #

1. 确保测试中Store配置一致 #

如果测试文件是单独创建Store而非直接导入应用的Store，必须同步添加禁用序列化检查的配置：

// 测试文件中的Store配置
const store = configureStore({
  reducer: { /* 你的reducer集合 */ },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

2. 全局统一测试环境的Store配置 #

若项目测试文件较多不想逐个修改，可在Jest全局配置文件（如setupTests.js）中统一处理：

// setupTests.js
import { configureStore } from '@reduxjs/toolkit';

jest.mock('@reduxjs/toolkit', () => {
  const originalToolkit = jest.requireActual('@reduxjs/toolkit');
  return {
    ...originalToolkit,
    configureStore: (options) => {
      // 强制禁用所有测试中的序列化检查
      const modifiedMiddleware = options.middleware 
        ? (getDefaultMiddleware) => 
            options.middleware(getDefaultMiddleware({ serializableCheck: false }))
        : (getDefaultMiddleware) => 
            getDefaultMiddleware({ serializableCheck: false });

      return originalToolkit.configureStore({
        ...options,
        middleware: modifiedMiddleware,
      });
    },
  };
});

3. 排查第三方中间件干扰 #

检查是否在Store配置中添加了额外第三方中间件，部分中间件可能会重新开启序列化检查，需确保所有中间件配置兼容serializableCheck: false的设置。

4. 临时过滤特定错误日志（不推荐） #

若以上方法无效，可临时在测试中过滤该错误日志以减少冗余输出：

// 在单个测试文件或setupTests.js中添加
beforeAll(() => {
  const originalError = console.error;
  jest.spyOn(console, 'error').mockImplementation((...args) => {
    if (!args[0]?.includes('A non-serializable value was detected in an action')) {
      originalError.call(console, ...args);
    }
  });
});

afterAll(() => {
  console.error.mockRestore();
});

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