Article

snapshot-testing

Category: Expert stories

Snapshot testing in front-end applications

In today's fast-paced software development landscape, maintaining application consistency is of utmost importance. One approach that has gained popularity is snapshot testing, and emagineer Kamil Naja is here to take us through the ins and outs.

Kamil Naja, Warsaw

One of the biggest challenges in developing frontend applications is avoiding introducing unwanted changes.

While testing the business logic can be done using unit tests, they usually don't cover the entire HTML structure. A solution to regression issues in HTML files can be found through snapshot testing.

 

What is snapshot testing?

In its simplest form, snapshot testing is a type of testing that revolves around comparing the generated HTML code of a component with its previous state.

A standard unit test works by initializing data, performing an action, and then checking selected values. In snapshot tests, the first two steps are the same, but the third step involves checking whether the rendered HTML is the same as it was during the previous test. The testing framework generates the component in the form of HTML and then verifies it.

If there are any differences compared to the previous snapshot, the developer can take two actions:

1. If the changes are expected, they can approve the new snapshot as the current one, which will be used for future comparisons.

2.  If the changes are unexpected, it indicates a regression. In such a case, the newly introduced code needs to be modified.

During the first execution of the test, the snapshot is simply added since there is nothing to compare it to.

The framework used for testing is equipped with a set of console commands that facilitate working with snapshots.

Snapshot files should be stored in the version control system and, as a consequence, should be analyzed during code reviews. They are generated in a special folder and have their own extension.

 

With a bit of experience, snapshot files are easy to analyze as they look almost the same as the HTML code generated by the application.

 

Similar to other testing techniques, snapshot testing should be used by all developers involved in changing the GUI. The best approach is to add the execution of snapshot tests to the flow of changes approval, so there is no need to remember to run them manually.

 

Which cases are worth checking during snapshot testing?

A good practice is to check at least three cases: the component with data, the component with no data, and the component displaying an error. If the component accepts multiple types of data (e.g., different states), it's worth testing all those cases.

Artboard 8

You can also test the application's state after performing specific actions. For example, you can check the snapshot of a table after navigating to the next page.

Snapshot testing involves creating snapshots with different data, which can be achieved by mocking the data in test files. If you're simultaneously writing unit tests, generating a snapshot does not require additional configuration.

However, this type of testing is not suitable for testing dynamic data, like generating random data in a front-end application. Special attention should be given to mocking the current date; otherwise, the snapshot may become invalid the next day.

What are the limitations of snapshot testing?

According to Michael Feathers' book, "Working Effectively with Legacy Code," unit tests should execute very quickly. Snapshot testing is a relatively resource-intensive technique, and tests usually take longer to run compared to unit tests. For example, if you want to verify if the application displays a specific title, it is easier and faster to do that with a unit test.

However, if there are several pieces of information on a page, it's better to use a snapshot test. It's essential to remember that each test consumes a certain amount of disk space. The larger the test data, the more space the snapshots will occupy.

 

  They always expect the generated HTML to be the same as before.

 

In some cases, snapshot tests may require more configuration or precise test data. For instance, as mentioned earlier, table tests may require mocking the appropriate service response for the 1st and 2nd page requests. To avoid duplicating test data, since it adds to the snapshot file size, it's better to carefully manage and use test data.

The limitation of snapshot tests lies in their sensitivity to changes. Even the smallest GUI change requires approving new versions of snapshots. Snapshot tests do not use assertions and cannot tolerate approximations like unit tests.

Read also:
AI support in the development of front-end solutions

In summary, snapshot testing is a useful technique for maintaining application consistency. However, it is essential to be aware of its limitations and associated costs.

Ready to grow?

Get help with your CV and profile and be found for rewarding projects.

Register your profile

Blog

Explore our blog

Read more

left-arrow
right-arrow

Henrik Timm
Projects & Implementation
Succeed as a consultant

The project manager in the era of AI

The advent of artificial intelligence (AI) has sparked discussions across various industries about its potential impact on traditional roles and responsibilities. The field of project management is not exempt from these considerations, and as a project manager, it is only natural to ask yourself: How will AI affect my work? 
Project manager at a meeting with his team.
Projects & Implementation
Succeed as a consultant

Key considerations for aspiring project managers

This article serves as a guide to all aspiring project managers, discussing important considerations and essential skills needed to excel in this dynamic career.
Projects & Implementation
Succeed as a consultant

From risks to requirements: Project initiation from A to Z

As the first step in the project lifecycle, project initiation is critical in determining the ultimate success of a project. Learn the best practices and key considerations for successful project initiation.