Our great sponsors
-
-
react-query
Discontinued 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
It is easy to replace the native fetch with Axios. There's only need to remove the code that checks if the response is successful and parse the JSON response body because Axios does it internally.
In complex web apps, making a lot of network requests, requiring advanced features like caching, it will probably be better to use React Query, a powerful React data synchronization library.
The useFetch hook could help us to simplify unit tests. In fact, we can spy on the hook and return a proper test double. Testing the component becomes easier because the hook spy hides the asynchronous behavior of fetch requests, serving directly the response. The stub let us reason about the component behavior and the test expectation without worrying about async execution. Assuming to use Jest and Testing Library, a unit test for the topics list component could be like the following.