Test responsive design using jest and react-testing-library
Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….
Testing React-Query with Jest and React-testing-library
Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….
Looping through Javascript Map object in React
In ReactJS, you can loop over a map using Object.entries() method to convert the Map object into an array of key-value pairs, and then use the map()…
The basic guide for React Query useMutation hook
React Query is a popular library for fetching, caching, and updating asynchronous data in React applications. It provides a number of hooks, including useMutation that allows you…
Submit formik form using React-Query mutations
In this article you will learn how to create forms using Formik library, and how to submit the forms using React-Query mutation hook. We will cover the…
How to mock and test Intl.DateTimeFormat in Jest
Intl.DateTimeFormat provides powerful functionalities to format dates. This article demonstrates how to mock and test Intl.DateTimeFormat with Jest. Example Consider we have the following function that does…
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…