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.
Succeed as a consultant

How to build a unique LinkedIn profile

In this article, our hiring manager and recruiter shares his tips on setting up a compelling LinkedIn profile to help you stand out on the job market.
Code
Expert stories
Succeed as a consultant

Seven mistakes every tester should avoid in QA

Written by a Test Team Leader and emagineer, this article dives into seven key pitfalls within software testing. Discover how to steer clear of these traps, strengthen your strategies, and lead your team toward testing excellence.
Case: Tech & development
Expert stories
Succeed as a consultant

Nx for Angular: A reliable tool simplifying the work with IT projects

Front-end developer explores how Nx can benefit Angular projects and its compatibility with other technologies like React & Node.
Expert stories
Succeed as a consultant

Tips from a consultant: How to optimize your workflow as an IT specialist

Front-end specialist shares his advice on how to become more efficient in your work as an IT consultant, incorporating habits that will sharpen your expertise and act as a gateway to securing better projects
IT specialist working from home.
Expert stories
Succeed as a consultant

Non-functional requirements in the Application Development Process

Within the development process, non-functional requirements emerge as a pivotal factor. The challenge lies in effectively gathering and processing these requirements, ensuring clarity and direction for every member of the IT team. The ultimate goal: crafting a distinctive and dependable end product that offers a seamless experience to the end user.
Expert stories
Succeed as a consultant

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.
Code
Expert stories
Succeed as a consultant
Tech & Development

Effective ways to work with Backend

In the realm of front-end solutions, the vital role of back-end applications cannot be overstated. In this article, emagineer Kamil Naja delves into the world of backend development, uncovering effective methods to optimize the process.
Data & Analytics
Expert stories
Succeed as a consultant

AI support in the development of front-end solutions

Gain valuable insights into the evolving landscape of front-end development as we explore the transformative applications of AI technologies. This article delves into three prominent AI tools: ChatGPT, GitHub Copilot, and GitHub Copilot Chat, and how they can be leveraged by front-end developers.
A consultant meeting two managers at a job interview.
Succeed as a consultant

Consultant interview from A to Z: Cheat sheet for landing your next job

A practical guide to land your next job. The consultant interview is a good opportunity to make a lasting impression. Here you can learn how to navigate your next job interview and land the job.
Succeed as a consultant

LinkedIn optimizations: Make your profile stand out

Six easy gains – you can use them today! In this article, you will learn six straightforward tips on upgrading your LinkedIn profile quickly and efficiently – these changes might make all the difference.
Senior consultant with beard looking self assured
Staff augmentation
Succeed as a consultant

Five characteristics of successful consultants

What makes a good consultant? While there is no step-by-step guide or a fixed formula to lead you to the top of the game, some characteristics are prevalent in all of expert consultants. Let us take you through five of the most prominent components contributing to success.
An experienced consultant smiling in a meeting with two others
Succeed as a consultant

Freelance 101: How to start as an independent IT consultant

Are you an IT expert with several years of experience, and do you dream of working independently and being your boss? It’s not that complicated to start, and we’ve made it easier for you. As a new freelancer, you have many opportunities, but you also face challenges. Check what is required and how to get started.