Jest中使用useContext读取初始状态失败问题求助

错误信息 #

Error: Uncaught [TypeError: Cannot read properties of undefined (reading 'initialState')]

问题根源 #

1. mockReducer返回值无效：useReducer会返回[state, dispatch]数组，但你用jest.fn()创建的mockReducer默认返回undefined，导致StateProvider的value变成[undefined, undefined]，组件解构[{ initialState }, dispatch]时第一个元素是undefined，自然读取不到initialState。
2. 测试变量名不匹配：你定义了prop1等变量，但渲染组件时误用了mockProp1这类未定义的变量，会引发额外错误。

修复方案 #

方案1：修复mockReducer并修正变量名

修改测试文件中的mockReducer，让它返回正确的state，同时修正变量名：

// Component.test.tsx
describe("Component", () => {
  it("should render correctly", () => {
    const prop1 = "prop1";
    const prop2 = "prop2"
    const prop3 = "prop3"
    // 让mockReducer返回传入的state，保证useReducer能拿到有效state
    const mockReducer = jest.fn((state) => state);
    const mockContext = {
      initialState: [{ id: "" }]
    }

    render(
      <StateProvider initialState={mockContext} reducer={mockReducer}>
        <Component
          prop1={prop1}
          prop2={prop2}
          prop3={prop3}
        />
      </StateProvider>
    );
  });
});

如果需要测试特定action逻辑，可以给mockReducer添加对应处理：

const mockReducer = jest.fn((state, action) => {
  switch(action.type) {
    case 'ADD_ITEM':
      return { ...state, initialState: [...state.initialState, action.payload] };
    default:
      return state;
  }
});

方案2：直接mock useStateValue钩子（更轻量）

如果不想依赖StateProvider的实现，可以直接mock自定义的useStateValue钩子，简化测试：

// Component.test.tsx
import { useStateValue } from './StateProvider';
// 提前mock钩子
jest.mock('./StateProvider', () => ({
  useStateValue: jest.fn(() => [
    { initialState: [{ id: "" }] }, // 模拟组件需要的state
    jest.fn() // 模拟dispatch函数
  ])
}));

describe("Component", () => {
  it("should render correctly", () => {
    const prop1 = "prop1";
    const prop2 = "prop2"
    const prop3 = "prop3"

    // 无需包裹StateProvider，直接渲染组件
    render(<Component prop1={prop1} prop2={prop2} prop3={prop3} />);
    
    // 后续可添加断言，比如检查组件渲染内容
  });
});

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