Now that we have a handful of React components, it’s about time to test them. Since they are nothing more than pure functions, they are perfect candidates for TDD, but because they were the first ones to get added along with the build process, we can give them a pass this time. In general, it’s worthwhile to start with the test case (or story, if tests are integrated in Storybook) first, and move on to the implementation second.

At this stage, our spinners don’t contain any business logic and only exist in one state. Later on, we might expose props such as size or color to allow customizing their state. For the time being, we can still test the markup (HTML) and styling (CSS) of each spinner. This is a perfect opportunity to apply snapshot testing

We’ll start off by capturing the markup and mocking the stylesSince we integrated Storybook, we could also use storyshots which play very nicely Though, since this didn’t occur to me at the time, I’m thinking of doing a follow up where we test out both the markup and the styling associated with each spinner. Let me know if this is something you’d be interested to see.

Jest is trivial to get started with, but you’ll notice the run times go up as the test suite grows in size. If you want to set up a pre-commit hook, your best bet is to pass --findRelatedTests option, so Jest only runs the tests directly affected by the changes in the commit

#testing #coding #npm #snapshot tests