Test dispatch action using react testing-library - reactjs

Question

Hi I have a function as shown below:
MyComponent.js-------
const somefunction = () => {
if (someCondition) {
dispatch(someActionMethod({
id: 01,
empName: 'Adam'
}).then((result) => {
setSomeState(result.data);
})
)
}
}
Tried a lot of ways to mock someActionMethod with dispatch, but all efforts are failing.
My test file:
import React from 'react';
import * as redux from 'react-redux';
import { render } from '#testing-library/react';
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch');
const mockDispatchFn = jest.fn();
describe('<MyComponent />', () => {
const props = {};
mockDispatchFn.mockReturnValue(
[{data1},{data2}]
);
let componentRendering;
beforeEach(() => {
componentRendering = render(
<MyComponent props={ props } />
)});
it('test component', ()=> {
expect(componentRendering.container.innerHTML).not.toBeNull();
});
});
Throws me error:
Cannot read properties of undefined (reading 'then')

Answer 1

My assumption from the error message is that your code is expecting a promise somewhere.
The stack trace will have info about the component throwing this error at a specific line.
I would recommend you to check your code and mock all the required methods
I hope this helps in resolving the error

Answer 2

Have you tried to mock useDispatch instead mocking someActionMethod?
import * as redux from 'react-redux';
const useDispatchSpy = jest.spyOn(redux, 'useDispatch');
const mockDispatchFn = jest.fn();
// One of these should work
mockDispatchFn.mockReturnValue([{data1}, {data2}]);
useDispatchSpy.mockReturnValue(mockDispatchFn);
With your updated response I'd try this:
describe('<MyComponent />', () => {
it('test component', () => {
const props = {};
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch');
const mockDispatchFn = jest.fn();
mockDispatchFn.mockReturnValue(
[{ data1 }, { data2 }],
);
render(<MyComponent {...props} />);
// your assertions here
});
});

Answer 3

Are you using it with middleware? I am not sure that dispatch returns a promise nor any value without using middleware.
By the way, mocking a react redux hook is not a recommended way and you could actually see it is not even possible as of version 8 of react-redux package.