Jest测试套件TypeError问题：ReactReduxContext模拟时displayName设置异常

你遇到的TypeError: Cannot set properties of undefined (setting 'displayName')错误，核心原因是jest.requireActual('react-redux').ReactReduxContext返回了undefined，导致无法对不存在的对象扩展属性。

以下是几种可行的解决方法：

1. 确认React-Redux版本的导出结构 #

不同版本的react-redux导出路径可能有变化，比如v8+版本中，ReactReduxContext的导出逻辑和旧版本不同。可以先在测试文件中打印实际导出内容，确认是否存在该属性：

console.log(jest.requireActual('react-redux'));

如果确实找不到ReactReduxContext，可以直接创建一个全新的模拟上下文对象：

import React from 'react';

// 模拟ReactReduxContext
ReactReduxContext: React.createContext({
  store: {
    getState: () => ({})
    // 根据组件需求添加其他必要的store方法，比如dispatch、subscribe等
  }),
  displayName: 'MockedReactReduxContext'
})

2. 给扩展操作加兜底判断 #

如果需要保留基于实际上下文扩展的逻辑，可以先判断原上下文是否存在，不存在则用空对象兜底：

const actualReactRedux = jest.requireActual('react-redux');
ReactReduxContext: {
  ...(actualReactRedux.ReactReduxContext || {}),
  displayName: 'MockedReactReduxContext'
}

这样即使原上下文是undefined，扩展空对象也不会触发错误。

3. 使用官方推荐的测试方式 #

React-Redux官方更推荐通过Provider组件配合模拟store来测试组件，而非直接操作内部上下文。这种方式更稳定且符合最佳实践：

import { Provider } from 'react-redux';
import { render } from '@testing-library/react';
import YourComponent from './YourComponent';

// 模拟store对象
const mockStore = {
  getState: () => ({ /* 填入你的模拟state数据 */ }),
  subscribe: jest.fn(),
  dispatch: jest.fn()
};

// 用Provider包裹组件进行渲染测试
render(
  <Provider store={mockStore}>
    <YourComponent />
  </Provider>
);

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