How To Test React Query Components

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.

I write about React and TypeScript there

[viniciusataidedealbuquerqu]

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

[SuperFerrox]

Great video very interesting, greetings from Salta, Argentina.

[Marcoserod]

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

[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.

[aleks]

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

[viksitagarwal]

Great Video, please also show how to test the hooks

[georgekalogeropoulos]

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?

[sangminna]

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

[kurans]

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

[viksitagarwal]

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.

[sebap_xc]

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

[ArgishtyStepanyan]

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

[rppd]

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... :(

[tomaszstanisz]

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? ?

[claystation]

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

[intekhabalam]

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

[codingSoothram]

@testing-library/react-hooks package will help to test hooks functionalities.

const { result, waitForNextUpdate } = renderHook(() => useCustomHooks());
act(() => {
result.current[0]('123');
});
await waitForNextUpdate();

[AsifSaho-zzcz]

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).