Build a Modern JS Project - #10 Snapshot Tests
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 with Jest https://jestjs.io/docs/en/snapshot-te...
We'll start off by capturing the markup and mocking the styles https://jestjs.io/docs/en/webpack#han... Since we integrated Storybook, we could also use storyshots which play very nicely with stories https://storybook.js.org/testing/stru... 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 https://jestjs.io/docs/en/cli#findrel...
Hope you found it useful!
Смотрите видео Build a Modern JS Project - #10 Snapshot Tests онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code Realm 20 Февраль 2019, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,21 раз и оно понравилось 6 людям.