How To Test React Query Components

📘New Course: Build full-stack React Typescript applications tsreact.maksimivanov.com/s/ytd
In this video we will write tests for a component that uses ReactQuery to fetch and update data. Let me know in the comments if you want to see how to test our custom hooks.
Code: github.com/satansdeer/react-q...
🐦 Twitter: / ivanov_dev
I write about React and TypeScript there
Code: github.com/satansdeer/react-q...
Discord: / discord
Mailing List: mailchi.mp/8192ce205321/maksim

[@SuperFerrox]

Great video very interesting, greetings from Salta, Argentina.

[@CTBell-uy7ri]

Helped a lot, thank you

[@viniciusataidedealbuquerqu2837]

great video! what shortcut did you use to run the only available test?

[@zakaryamamouni6078]

Thanks for sharing Maksim!

[@aleks6331]

Great content Maksim!
Could you please update repo with created test files?

[@gavinlindridge]

Agreed, It would be really cool if you could please push your test changes if you still have them?

[@juliusngwu]

Thank you for the video

[@Marcoserod]

Really helpful video!
Do you know if there is a way to test with which parameters a query has been refetched ?

[@matsomo]

excellent tutorial

[@claudioseccia9380]

thanks!!! super cool content!

[@satansdeer1]

Thank you ☺️

[@viksitagarwal1923]

Great Video, please also show how to test the hooks

[@GaryMenzel]

I think it would be great to see how to test the hooks themselves. I am already doing hook abstractions to allow for mocking tests, so it would be good to be able to test those independently.

[@yafiecake]

true. have u done it Gary? I want to learn how.

[@sebap_xc]

hey, thanks for the great vid. how do you set up vscode to see the live testing icons in your file?

[@apawar3099]

He added Jest extension on vscode

[@sangminna2308]

This is one of the greatest testing video, it's really helpful, thank you so much!

[@valerymbele4451]

Yes please, test the custom hooks

[@kurans2000]

I have hook which uploads file, it has a lot of logic within hook itself, would be great if we could see example how to test hook which is using useMutation inside

[@georgekalogeropoulos1813]

Why are you checking if Book form got the default values?Isn't it better to just search for the elements that should appear,more like an integration test?

[@dorin6880]

Thanks. Great explanation.

[@viksitagarwal6228]

Can you please also share the test code - *.spec.jsx files, along with setupTests.js files with the test code you have written in the video.

[@intekhabalam3833]

it was nice tutorial thanks for this, but "how can we mock the useMutation using TypeScript"

[@tomaszstanisz1786]

I have an issue now, then trying to wrap useQuery hook with `useCustomHook` then I have info error from React that i cannot use hooks not in React Component (capital first letter component) and i'm forced to wrap useQuert and useMutate with RaectComponent 🙄
Is it from new @tanstack react query v4 or am i doing domething wront? ?

[@jorgearaya3154]

Thanks Thanks Thanks Thaaaaaaaaaaaaaaaaaaaaaaaaanks!!!!!!!!!! :D

[@satansdeer1]

You are welcoooooooooooooooooome

[@rppd2907]

I am using a custom hook calling an API i am following all the steps , exact code and i am getting : The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables. Invalid variable access: jest. Tried the doMock still not working.
Please help me . Would be much appreciated i am stuck 1 week on this... :(

[@ArgishtyStepanyan]

cannot find the tests in the repo, can you please push the code to the repo?

[@codingSoothram]

@testing-library/react-hooks package will help to test hooks functionalities.
const { result, waitForNextUpdate } = renderHook(() => useCustomHooks());
act(() => {
result.current[0]('123');
});
await waitForNextUpdate();
expect(result.current[1].isSuccess).toBe(true);

[@claystation6360]

Hey @Maksim I'm curious if you'd recommend utilizing react query for an enterprise geospatial react-map-gl application in 2022?

[@AsifSaho-zz8cz]

can you cast another for react router v6?

[@VYuhim]

А что тестируют эти тесты, кроме того, что реакт отрендерил jsx ?)

[@tsooooooo]

Nice vid but with this approach it seems like the system under test is quite small. You're just testing rendering logic, not exercising the hooks. I'd rather mock the api layer and test the hooks in isolation. Then refactor the presentation components so they just take results of hooks and can be tested without mocks. Also, the expect toHaveBeenCalledWith is testing the implementation (enzyme style), not the behaviour, making it harder to maintain if you want to refactor internals - react testing library is intended to be analogous to a real user clicking around etc (at component level - not full e2e).

[@satansdeer1]

Fantastic comment, I’d love to discuss react testing approaches with you. Would you mind jumping on a stream someday?

[@tsooooooo]

@@satansdeer1 hah, I'm a grumpy old man, probably not palatable to your audience. Happy to discuss offline though

[@chetan9533]

@@tsooooooo wouldn't testing hooks also be similar to testing implementation/enzyme style?

[@chetan9533]

I wish react was a bit more opinionated, there's too much freedom. I have understood the basic arrange -> act -> assert philosophy but having hard time trying to figure how to test react components 😅