React-Redux useSelector Jest模拟测试报错排查求助

问题出在你传给useSelector回调的参数结构不对。组件里的useSelector回调函数接收的是完整的Redux state对象，但你直接传了templates数组——而组件代码里应该是在尝试从state的某个属性（比如state.templates.ids）读取值，数组自然没有ids属性，所以报错。

修复步骤： #

• 先还原真实Redux store的结构，把templates放到对应字段里，生成一个mock state对象
• 把这个mock state对象传给useSelector的回调函数

举个具体例子：
如果你的真实state结构是这样的：

// 真实Redux store的state结构
{
  templates: [
    { id: 1, name: '模板A' },
    { id: 2, name: '模板B' }
  ],
  // 其他可能的state字段...
}

那你的测试代码要改成：

// 定义匹配真实结构的mock state
const mockState = {
  templates: [
    { id: 1, name: '模板A' },
    { id: 2, name: '模板B' }
  ]
};

jest.mock('react-redux', () => ({
  ...jest.requireActual('react-redux'),
  useSelector: jest.fn(),
}));

describe('some awesome description', () => {
  beforeEach(() => {
    // 把mockState传给回调
    useSelector.mockImplementation(callback => callback(mockState));
  });

  // 测试用例...
});

如果你的state里templates是一个包含ids和entities的对象（比如用了normalizr），那就要对应调整mockState：

const mockState = {
  templates: {
    ids: [1, 2],
    entities: {
      1: { id: 1, name: '模板A' },
      2: { id: 2, name: '模板B' }
    }
  }
};

核心就是：mock的state结构必须和真实Redux store的结构完全匹配，这样组件里的selector才能正确读取到需要的属性。

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