Snapshot Testing With Jest, React and Redux - reactjs

Question

I'm trying to create a snapshot of my component which is using some custom useSelector and useDispatch hooks my boss created.
import { createDispatchHook, createSelectorHook } from "react-redux";
const Context = React.createContext(null);
export default Context;
export const useDispatch = createDispatchHook(Context);
export const useSelector = createSelectorHook(Context);
In my component the useSelector & useDispatch hooks are being called so I used jest.mock() on the hooks but then I get thrown an error saying TypeError: (0 , _reactRedux.createDispatchHook) is not a function. I can't find any documentation on how to mock a custom hook or how to even fix this issue.
import React, { createContext } from 'react';
import renderer from 'react-test-renderer';
import DecisionSidebar from './DecisionSidebar';
import { cleanup } from '#testing-library/react';
jest.mock('react-redux', () => ({
useDispatch: () => { },
useSelector: () => ({
project: {
myId: 0,
isProjectAdmin: true,
}
}),
}));
afterEach(cleanup);
describe('DecisionSidebar Snapshot Test', () => {
it('renders correctly with data', () => {
const component = renderer.create(<DecisionSidebar />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});
I have also tried this in my jest file which produces a different error (which I have tried to fix since this one is easier and there are a lot of fixes, but still no luck)
const mockContext = React.createContext(null);
const mockCreateDispatchHook = () => new createDispatchHook()
const mockCreateSelectorHook = () => new createSelectorHook();
jest.mock('react-redux', () => ({
...jest.requireActual("react-redux"),
useSelector: () => mockCreateSelectorHook(mockContext),
useDispatch: () => mockCreateDispatchHook(mockContext),
}));
Using the the way from the redux website as suggested
import React from "react";
import { render } from "#testing-library/react";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import rootReducer from 'reducers';
const Context = React.createContext(null);
const renderer = (
ui,
{
initialState,
store = createStore(rootReducer, initialState, applyMiddleware(thunk)),
...renderOptions
} = {}
) => {
const Wrapper = ({ children }) => {
return (
<Provider
store={store}
context={Context}
>
{children}
</Provider>
);
}
return render(ui, { wrapper: Wrapper, ...renderOptions });
};
export * from "#testing-library/react";
export { renderer }
describe('DecisionSidebar Snapshot Test', () => {
it('renders correctly with data', () => {
const component = renderer(<DecisionSidebar />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});
Still produces the same error