使用redux-mock-store测试React-Redux组件时遇getState未定义错误

问题 #

尝试使用redux-mock-store测试React-Redux连接的函数式组件时，始终遇到错误：TypeError: Cannot read properties of undefined (reading 'getState')。已尝试从shallow切换为mount，但问题依旧。以下是组件代码和测试代码：

组件代码 #

function Carer() {
  const carers = useSelector((state) => state.carers.carers);
  const remount = useSelector((state) => state.remount.reload);
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(fetchCarers());
  }, [dispatch, remount]);

  return (
    <div className="carer__container">
      <div className="row">
        <div className="col-11 col-sm-5 m-3 ">
          {carers}
        </div>
      </div>
    </div>
  );
}

export default Carer;

测试代码 #

import { Provider } from 'react-redux';
import { middleware } from '../../../redux/store';
import configureStore from 'redux-mock-store';

let mockStore = configureStore(middleware);

describe('Carer components', () => {
  let wrapper;
  let store;

  const mockState = {
    carers: { carers: [], loading: false, hasErrors: false },
  };

  beforeEach(() => {
    store = mockStore(mockState);
    wrapper = shallow(
      <Provider>
        <Carer store={store} />
      </Provider>
    );
  });

  it('should render correctly', () => {
    expect(wrapper.length).toEqual(1);
  });
});

解决方法 #

你有两个关键操作错误：

1. Provider未传入store属性
   Provider组件必须接收store作为props，才能为子组件提供Redux上下文。你的测试代码里<Provider>没有传store，导致组件内的useSelector和useDispatch无法获取到store实例，直接抛出getState未定义的错误。

2. 无需给Carer组件直接传store props
   你的Carer组件是通过useSelector、useDispatch这类hooks连接Redux的，不是用connect高阶组件包装的，所以不需要给组件本身传store props，只要确保它被包裹在配置正确的Provider内即可。

修正后的测试代码 #

import { Provider } from 'react-redux';
import { middleware } from '../../../redux/store';
import configureStore from 'redux-mock-store';
import { shallow } from 'enzyme';
import Carer from './Carer'; // 请补全正确的组件导入路径

let mockStore = configureStore(middleware);

describe('Carer components', () => {
  let wrapper;
  let store;

  const mockState = {
    carers: { carers: [], loading: false, hasErrors: false },
    remount: { reload: false } // 补充组件依赖的remount状态，避免useSelector读取属性报错
  };

  beforeEach(() => {
    store = mockStore(mockState);
    wrapper = shallow(
      <Provider store={store}> {/* 给Provider传入store */}
        <Carer /> {/* 不再给Carer组件传store */}
      </Provider>
    );
  });

  it('should render correctly', () => {
    expect(wrapper.length).toEqual(1);
  });
});

额外注意事项 #

• 组件中用到了state.remount.reload，但原mockState里没有这个字段，测试时会触发另一个“读取undefined属性”的错误，所以要在mockState里补充remount: { reload: false }。
• 若使用React Testing Library而非Enzyme，写法会略有不同，但核心逻辑一致：确保Provider传入正确的mock store实例。

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