Hi there! I came here from your blog post on Jest and React testing library https://blog.sapegin.me/all/react-testing-3-jest-and-react-testing-library/
Towards the end you mentioned jest and nock to mock modules. More importantly, I noticed that you mocked the responses on a per-test basis.
This is what I was doing for a while too (similar to mocking fetch), however I started to notice problems with mocking resolved value of API responses on a per-test basis. It works perfectly when you are working with the component that makes the request directly. However, let's say you have a super generic component like App
which renders a lot of different components.
When testing App
you wouldn't know what requests are going to be made and what to mock unless you trace through the entire component hierarchy and mock things out one by one. You may have all kinds of Child components that make network requests on mount.
A solution might be to use shallow rendering, or adopt the mockist style of TDD by mocking/spying those components but obviously there's a reason why react testing library doesn't encourage this style of TDD.
React testing library seems to follow the classical style of TDD where our units actually exercise their collaborators instead of mocking them out. Therefore, a more appropriate solution seems to be using nock or Mock service worker and defining global handlers for them.
This seems to be a good solution, however, I also faced the problem where sometimes it feels like you are having to reimplement your entire backend.
Any thoughts on this?