useNavigate may be used only in the context of a component
If you’ve ever faced the following error in React: useNavigate() may be used only in the context of a component This error throws in useNavigate hook. This happens…
How to mock React-Router-Dom hooks in Jest
To mock React-Router-Dom hooks in React you need to do the following: Mock the library React-Router-Dom using jest.mock Import non-mocked React-Router-Dom, so that we can use the…
How to change the styles of MUI TextField In React
MUI library is a great library that offers a comprehensive suite of UI tools that helps ship new features faster. Sometimes we would like to customize the…
Found multiple elements error in React Testing Library
Introduction While working with React-Testing-Library to test UI components, you might encounter an error like the following: HTML Structure: Here’s an example of the HTML structure that…
How to invalidate query after mutations in React-Query
Introduction Query invalidation is an essential part while working with React-Query. Usually, when there is a mutation in the app, there are queries related, and when a…
How to handle multiple queries with React-Query
A super cool feature of React Query is that we can execute multiple queries in the same component, whether these queries are dependent or independent of each…
How to auto-pull data in React-Query
Introduction React-Query is a powerful tool for fetching/caching the data on the frontend side, yet working with React-Query might be a bit not straightforward, in this article…
React-Query: How to fetch queries conditionally
Introduction React-Query is a powerful tool for fetching/caching the data on the frontend side, in this article we’re going to demonstrate how we can fetch the queries…
React-Query useMutation with Jest Testing
Introduction React-Query is a powerful tool for fetching/caching the data on the frontend side, yet testing React-Query with Jest and React-testing-library might be a bit tricky, in…