TypeError: Cannot read properties of undefined (reading 'getState') when I try to test my react-redux connected component using redux-mock-store

Question

I am trying to test my function react-redux connected component using redux-mock-store. However, I keep getting TypeError: Cannot read properties of undefined (reading 'getState'). I have tried shallow to mount yet still have the same error. What am I doing incorrectly?

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;

Here is my test file below

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);
  });
});

Answer 1

The Carer component doesn't consume any props. Pass the store to the Provider component.

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