A generic hook wrapping
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.
it takes an
entityNameand generates the correct URL to send a post request to
it forwards models and request configurations to the HTTP request
it wires up
ErrorHandlerfor error handling
it invalidates queries with keys containing the
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
TestComponentshows how the SUT is to be used. It also has a
useGetItemshook to test if the queries are invalidated properly. The code and tests for
useGetItemsare here, it also introduced the use of
the tests use
findByTextas a way to wait for the SUT to finish its operations
server.usefrom MSW is used to override the target endpoint to test the
paramsand error responses.
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.