DEV Community

Rex
Rex

Posted on • Updated on

Testing a HTTP Client Adaptor Hook useClient

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.

Discussion (0)