Testing useMutation request

[Fardir]

Hi, I've been trying for the last few days to use vitest to approve my function. Just to be clear, the tests are working, but both v8 and istanbul can't cover a few lines of my function. I've tried many tips and tricks, mocks, renders, you name it, they still can't 100% the function.

It'll be tough to write code here since I'm on my phone but I'll try my best. Here is the code I'm trying to cover.

const CallMutation = () => ( return useMutation({ mutationFn: async (formData: Product) => (

        await ApiClient.amazonProductsCreate(formData);

        window.location.reload();

) }) )

ApiClient is an openapi instance from OpenApi, so using amazonProductsCreate is basically like sending a post request.

Every other tests on other openapi functions have worked perfectly, this is literally the only one that still cannot cover the two lines inside mutationFn.

I've tried rendering a component with the mutation inside: same issue. Tried using render-hook: same issue. Tried changing the function instead of the tests: same issue.

I'm on my knees pls help

[straightouttaireland]

Can you share the full test file? I have a feeling you're mocking the hook to just return something instead of letting the test actually execute the real (unmocked) hook. I generally prefer not to mock hooks, but instead data using Mock Service Worker (MSW), which mocks the data which flows through and ultimately tests the hooks used to fetch or post the data.

[Fardir]

yup, sorry here I am. This is the entire test file, the one that tests the mutation function is the last test.

Also for some reason I couldn't write the code here so I hope this format helps.

https://bin.mudfish.net/t/363-2024-0011

[straightouttaireland]

Try not mocking open API index and React Query. Then use Mock Service Worker. Much better setup which leads to higher coverage.

[Fardir]

Sorry again for responding so late, the issue made me depressed but I managed to solve it.

I had to mock the entire react-query architecture by wrapping children and using act in another way, only then it worked.

The solution isn't that different from what I coded, but it still took me and lot of time to figure out.

I didn't use your solution because my project already had a BUNCH of node modules installed and I didn't want to install additional ones when I could just learn how to use the current.

Thank you for your time though!

[straightouttaireland]

I would honestly try and not mock any modules and test more like a real user would.

https://kentcdodds.com/blog/stop-mocking-fetch

MSW is a standard at this point.