Here we reach 100% test coverage for all 17 Frederic components in Jest. A few notes:
I’ve used shallow almost all the time because it’s faster than mount, and the latter is recommended only if we need to interact with DOM APIs. Although shallow does not include styles in its snapshot, I think of snapshots not so much as something we should manually inspect but more as a final automated "sanity check" to make sure nothing has changed. Instead, I use jest-emotion to actually run tests to check that expected style rules are applied.
Here's a very interesting discussion, by the way, about whether we should check rendered HTML in unit tests, the general conclusion being that we shouldn’t, because that’s less a unit test that testing React - we only need to test our components.
I render a minimal number of times in my tests, re-using the same wrapper where possible. Quite often conditional logic calls for different styles. This could not be tested until I installed jest-emotion and I’ve written tests for all these branches.
I have refactored actual components only very minimally to avoid Jest warnings. This branch is just to make tests pass, but as a separate task we could consider refining these components.
These tests are pretty thorough - they could probably have been even more so, but that might be overkill - this does give us 100% coverage including all logical branches and then some. Any feedback appreciated.
Here we reach 100% test coverage for all 17 Frederic components in Jest. A few notes:
I’ve used
shallowalmost all the time because it’s faster thanmount, and the latter is recommended only if we need to interact with DOM APIs. Although shallow does not include styles in its snapshot, I think of snapshots not so much as something we should manually inspect but more as a final automated "sanity check" to make sure nothing has changed. Instead, I usejest-emotionto actually run tests to check that expected style rules are applied.Here's a very interesting discussion, by the way, about whether we should check rendered HTML in unit tests, the general conclusion being that we shouldn’t, because that’s less a unit test that testing React - we only need to test our components.
I render a minimal number of times in my tests, re-using the same wrapper where possible. Quite often conditional logic calls for different styles. This could not be tested until I installed
jest-emotionand I’ve written tests for all these branches.I have refactored actual components only very minimally to avoid Jest warnings. This branch is just to make tests pass, but as a separate task we could consider refining these components.
These tests are pretty thorough - they could probably have been even more so, but that might be overkill - this does give us 100% coverage including all logical branches and then some. Any feedback appreciated.