Testing a dispatch inside a hook using renderHook

[reqyou]

Hi everyone,
I am not able to properly test a state dispatch using jest, rtk, rtkq and msw. After successfully mocking the API call + mocking a response (Promise.resolve(myObject)) with MSW I would like to update the state, which ends up in a pending premise or an undefined resolve respectively. The business logic of my hook is the following:

useMyCustomHook

import { setMyData} from '/App.slice';

export const useInterrupt = () => {
   const dispatch = useAppDispatch();
   const [myQuery] = useQueryMutation();

   const handleSomething = (): Promise<OfTypeMyObject> => {
     return myQuery({ myParam: 123 }).unwrap().then((response: OfTypeMyObject) => {dispatch(setMyData(response))});
   }
}

According to the example here in this repo, I build a RenderWrapper which setup the store and passes the children. In my jest test I am rendering my above mentioned custom hook, which also follows mostly your example.

test

const { result } = renderHook(useMyCustomHook, { wrapper: RenderWrapper });

let response;
await waitFor(() =>
    act(() => {
       response = result.current.handleSomething('handle_it');
    })
);

expect(response).resolves.toBe(myObject);

which ends up with an expected myObject and a received undefined. I logged the steps and until I want to update the state everything is working fine.

Does anyone have an idea, what's the issue here? It seems like the rendered store isn't updated correctly. May someone link a working example? If more information is required, let me know.

Thanks everyone

[phryneas]

That seems about right since handleSomething is actually a Promise<void>. I'm not sure why TypeScript isn't exploding there.

Your code here

   const handleSomething = (): Promise<OfTypeMyObject> => {
     return myQuery({ myParam: 123 }).unwrap().then((response: OfTypeMyObject) => {dispatch(setMyData(response))});
   }

ends with a method body that doesn't return anything - so it returns undefined.

[reqyou]

Man @phryneas, you are absolutely right. I don't know why, but I was expecting actually an object. Do you see any safer implementation, any suggestions, since I would like to avoid stumbling over the same thing again later.

Best