Shallow copy a React component with a provided store in Enzyme - reactjs

Question

When I try shallow(<LoginForm />) I get the following error Invariant Violation: Could not find react-redux context value; please ensure the component is wrapped in a <Provider>. So in order to fix this, I tried:
const wrapper = shallow(
<Provider store={store}>
<LoginForm />
</Provider>
);
This works, however, the debug output is:
<ContextProvider value={{...}}>
<LoginForm />
</ContextProvider>
But I also want to render the LoginForm. Some other things I tried to get this fixed:
wrapper.find(LoginForm).shallow();
shallow(
<Provider store={store}>
<LoginForm />
</Provider>
).dive();
wrapper.find(LoginForm).shallow();
shallow(<LoginForm />, {
wrappingComponent: Provider,
wrappingComponentProps: { store }
});
But all of these result in the same error mentioned above. How am I able to fix this, while using the shallow method? Also, the LoginForm uses react hooks, including a useSelect hook, so passing a store to my component prop is not the solution I'm looking for.

Answer 1

You can mock useSelector, also handy mock selector function
import React from 'react';
import { mount, shallow } from 'enzyme';
import { getIsAuthorized } from 'modules/auth/reducer';
import SignIn from '../SignIn';
jest.mock('modules/auth/reducer');
jest.mock('react-redux', () => {
const RealModule = jest.requireActual('react-redux');
return {
...RealModule,
useSelector: (fn) => fn(),
};
});
interface SetupProp {
isAuthorized: boolean;
}
describe('Page: SignIn', () => {
const setupWrapper = ({ isAuthorized }: SetupProp) => {
(getIsAuthorized as jest.Mock).mockReturnValue(isAuthorized);
return shallow(<SignIn />);
};
test('should render form', () => {
const wrapper = setupWrapper({ isAuthorized: false });
expect(wrapper).toMatchSnapshot();
});
});
SignIn Component:
const SignIn: FunctionComponent = () => {
//...
const isAuthorized = useSelector(getIsAuthorized);
//...
}