Mock Redux Store未返回预期值，如何验证其存储内容？

DevOps 小满

2026-8-1

验证Mock Redux Store存储值的方法

1. 直接调用Mock Store的`getState()`方法验证状态

redux-mock-store生成的实例自带getState()方法，可直接获取当前存储的状态，和预期值对比：

// 在创建store后或组件渲染后添加
console.log('当前Mock Store状态:', store.getState());
// 断言状态是否符合预期
expect(store.getState().project.name).toBe('Test Project');

2. 修正组件中`useSelector`的映射错误

你组件里的代码const { project } = useSelector((state) => state.project);存在逻辑问题：
你的Mock Store结构是{ project: { name: 'Test Project' } }，state.project已经是包含name的对象，此时解构{ project }会因为该对象内没有project属性而得到undefined，最终导致拿到空字符串。正确写法应该是：

// 直接获取整个project对象
const project = useSelector((state) => state.project);
// 或者直接解构name属性
const { name } = useSelector((state) => state.project);

这才是组件中useSelector返回空的核心原因。

3. 在测试用例中补充状态验证步骤

可以在测试的关键节点（初始化store后、组件渲染后）添加状态断言，确保数据流转正确：

test('renders checklists from state and displays the project name', async () => {
  const project = { name: 'Test Project' };
  const store = mockStore({ project });

  // 初始化后立即验证store状态
  expect(store.getState().project).toEqual(project);

  await act(async () => {
    render(
      <Provider store={store}>
        <Checklists />
      </Provider>,
      container
    );
  });

  // 渲染后再次验证store状态（若有action触发状态变更也可在此检查）
  expect(store.getState().project.name).toBe('Test Project');

  const projectName = container.querySelector('.Checklists-ProjectName');
  expect(projectName.textContent).toBe(project.name);
});