jest.spyOn does not work on useDispatch after upgrading to react-redux v8?

[bruhyan]

Currently experiencing trouble mocking useDispatch in my test files after upgrading to react-redux v8. The following works in v7:

import * as redux from 'react-redux'
...
const dispatchMock = jest.fn();
const spy = jest.spyOn(redux, 'dispatch'); // unit test now fails with TypeError: Cannot set property useDispatch of #<Object> which has only a getter
spy.mockReturnValue(dispatchMock);

Any advice appreciated!

[markerikson]

I'm not sure why you're seeing this error, but we would strongly advise against ever trying to mock useDispatch or useSelector. Tbh, I have no idea why you would want to do that in the first place.

Please see our "Testing" docs page for our recommended approaches:

https://redux.js.org/usage/writing-tests

[grevzi]

Hi all.
I see that that is not recommended way how to test your application, but in case you already have a lot of written tests with spyOn for useDispatch and you have already switched to the react-redux v8 it may help.

It works for typed version of useDispatch

// ./hooks/useAppDispatch.ts

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

That means that you are using throughout your app instead of plain useDispatch
const dispatch = useAppDispatch();

and here is how the spyOn will look:

// somewhere in your test file

import * as redux from './hooks/useAppDispatch';

// ...

const useDispatchSpy = jest.spyOn(redux, 'useAppDispatch');
const mockDispatchFn = jest.fn(() => Promise.resolve());
useDispatchSpy.mockReturnValue(mockDispatchFn);

// ...
const data = {some: 'data'};
expect(mockDispatchFn).toHaveBeenLastCalledWith(data);