Since version 14.0, Jest comes with a new feature. There is a blog post announcing the feature that also explains the . But I think it's better to explore it based on my own experiences. Snapshot reasons why Facebook implemented it First of all, it is important to highlight that each type of testing differs and have specific purposes. for example validates that each unit of the software performs as expected. ensures that the units work well together. tests the application interfaces by the user perspective. Unit Testing Integration Testing User Interface Testing (End-to-end Testing) There are also some techniques like (TDD) which define "when you should test" (or write tests before coding) and (BDD) that approaches "why you are coding" (or behavior and specs before coding). Test Driven Development Behavior Driven Development Regression Testing has nothing to do with the previous types and techniques of testing. The snapshots are useful to ensure that the will not change in future. So, it is impossible to TDD or BDD with Snapshot Testing because you should write the code first and test after. Snapshot Testing state of something Snapshot Testing is a type of which is intended to verify that a previously developed and tested Software performs correctly after change. Regression Testing Testing declarative interfaces and integration The following component example is frequently covered by tests. Let's think about it. But first, make sure you realize that the code is declarative, without any kind of logic. Cart Item It is testing of declarative code. , the task of testing declarative code ends up with a test that tells what the declaration itself does. But with less readability and intent. Indeed, . difficult to mind and justify As pointed in these article declarative code is in fact formal specification It is fair that a BDD test case ensures that the and appears on the interface. These two assets are part of the feature specification: should have image and quantity. quantity image Cart Items Also, it's pointless to cover these with Snapshot Testing. When changing it in the future you intentionally do so. But on the other hand, the (or other components) could with the . Maybe the developer who changed doesn't know that uses it. Cart snapshot its integration Cart Item Cart Item Cart Legacy and poor tested code In my humble opinion, a project with a legacy code base that should be evolved is the best fit for Snapshot Testing. With this type of test it's easy to create a minimum test code coverage without wasting time with Unit Testing. Take a look at on an application that uses and . Note that I used Enzyme method instead of or because I intend to test the final HTML result. an example of a Snapshot Test React Enzyme render shallow mount If you are on a project like this, I wish you the best of luck and also advise you to look at tools like that automates . PhantomCSS Visual Regression Testing

AirBnB

Facebook

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Front-end (React) Snapshot Testing with Jest: What is it for?

Too Long; Didn't Read

Companies Mentioned

Jean Carlo Emer

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Front-end (React) Snapshot Testing with Jest: What is it for?

Too Long; Didn't Read

Companies Mentioned

Jean Carlo Emer

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES