Testing a HTTP client adaptor hook useClient

Testing (Series)
Understanding Unit Test From The Best Book On The Topic
Testing Ag-Grid React’s Custom Cell Renderer Component
Testing ErrorFallback Component
Testing useDebouncedValue Hook
Testing a HTTP Client Adaptor Hook useClient
Testing a HTTP Error Handler Utility Hook
Testing a Generic Fetch Item List hook with Mock Service
Introducing @mockapi/msw, mock an API server for your entities without writing any code with Mock Service Worker
Testing a Generic Save Item Hook with MSW and @mockapi/msw
Testing a Text Field component integrating Mui’s Text Field with React Hook Form

Subject Under Test(sut)

A HTTP client adaptor that wraps axios’s get, post, patch and delete methods, adding JWT token to all requests if a token is found.

This adaptor hook exists for the following reasons:

1. it acts as an adaptor to axios, so that in the future, I could replace axios without touching any other code
2. it adds base URL, JWT and default headers to HTTP calls for conveniences

Behaviours

1. the hook returns a set of methods for making HTTP calls
2. it prepends base URL
3. it adds JWT token to headers if a token is found
4. it adds default headers
5. it accepts custom headers and overrides default headers
6. it accepts custom options and passes them to HTTP requests

Code

Notes

1. mock axios so that tests don't make actual HTTP calls
2. JSDOM implements localstorage, and there is no need to mock it.
3. setup uses renderHook from @testing-library/react-hooks, which wraps the hook in a component and return a result object with current property set to whatever the hook returns.
4. setup also mock the return of axios.get method and returns the mocked axios object for assertions.
5. included tests only test get. Other tests are similar, so they are left out in this blog post for simplicity.

Originally published at https://dev.to on January 11, 2022.