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
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
- it takes an
entityName
and generates the correct URL to send a post request to - it forwards models and request configurations to the HTTP request
- it wires up
ErrorHandler
for error handling - 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
TestComponent
shows how the SUT is to be used. It also has auseGetItems
hook to test if the queries are invalidated properly. The code and tests foruseGetItems
are here, it also introduced the use ofuseTranslationForTest
andQueryClientProviderForTest
- the tests uses
findByText
as a way to wait for the SUT to finish its operations server.use
from MSW is used to override the target endpoint to test theparams
and 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.
Originally published at https://dev.to on January 17, 2022.