I would consider this a poster boy of migrating tests done in Enzyme to Testing Library.
Going into a bit more detail, I changed the nesting of the HTML elements to correctly link the <label> to the <input> inside the React Select component. This is due to the fact that Testing Library would complain about the lack of a <form> tag in the rendered HTML.
I decided not to use data-testid so that app code wouldn’t get “contaminated” by test-only code, althought that means that getting any <input> in GeneSearchForm requires using getAll... and then specifying a hard-coded index in the array, which might be going too deep into implementation-specific details.
Another big change, after Testing Library recommendation, is to remove fetch-mock and use whatwg-fetch with Mock Service Worker (msw). In this way we get a full-fledged fetch implementation that works closer to how a browser would. The test code becomes a bit more boilerplate-y and imperative, but hopefully tests will be more robust.
I would consider this a poster boy of migrating tests done in Enzyme to Testing Library.
Going into a bit more detail, I changed the nesting of the HTML elements to correctly link the
<label>to the<input>inside the React Select component. This is due to the fact that Testing Library would complain about the lack of a<form>tag in the rendered HTML.I decided not to use
data-testidso that app code wouldn’t get “contaminated” by test-only code, althought that means that getting any<input>inGeneSearchFormrequires usinggetAll...and then specifying a hard-coded index in the array, which might be going too deep into implementation-specific details.Another big change, after Testing Library recommendation, is to remove
fetch-mockand usewhatwg-fetchwith Mock Service Worker (msw). In this way we get a full-fledgedfetchimplementation that works closer to how a browser would. The test code becomes a bit more boilerplate-y and imperative, but hopefully tests will be more robust.At the end of the day this is what we have: