Testing a Generic Save Item Hook with MSW and @mockapi/msw

Subject Under Test

A generic hook wrapping useMutation of React-Query for all of my master-detail edit forms. It is an adaptor responsible for generating URL by entity name, error handling and invalidating relevant queries.

Behaviours

1. it takes an entityName and generates the correct URL to send a post request to

2. it forwards models and request configurations to the HTTP request

3. it wires up ErrorHandler for error handling

4. it invalidates queries with keys containing the entityName

MSW and @mockapi/msw

The tests use MSW and @mockapi/msw to mock a post endpoint for a dummy entity Supplier. @mockapi/msw provides a standard set of CRUD endpoints so that I do not have to write any endpoints for this test suite. For more information: @mockapi/msw

Code

Notes

1. TestComponent shows how the SUT is to be used. It also has a useGetItems hook to test if the queries are invalidated properly. The code and tests for useGetItems are here, it also introduced the use of useTranslationForTest and QueryClientProviderForTest

2. the tests use findByText as a way to wait for the SUT to finish its operations

3. server.use from MSW is used to override the target endpoint to test the params and error responses.

4. With the help of MSW, the tests only care about the data flows. I love the setup because it doesn't care about how the HTTP requests are made. I could have replaced React Query and Axios without touching the tests.