This content originally appeared on Bits and Pieces - Medium and was authored by Viduni Wickramarachchi
Test whether any characteristics of your application have changed.
There are many types of software testing. Among these, one of the unique types of testing methods is Snapshot testing.
Snapshot tests assert that the current output is same as the output before.
The main difference between snapshot testing and functional/unit tests is, snapshot tests never assert the correct behavior of the application functionality but does an output comparison instead.
There are two types of tools that support frontend snapshot testing.
Tools that take snapshots of serializable data
Jest is a tool that has built-in support for snapshot testing. Testing React components are highly supported through this. Further, Cypress supports snapshot testing via plugins (@cypress/snapshot)
Tools that take visual snapshots
Intern (via visual plugin), Jest-Image-Snapshot plugin, Applitools (for visual AI testing) are examples of tools that take visual snapshots.
In this article, I will explore Snapshot testing with examples of it using Jest. Basic prior knowledge about Jest would be an added benefit to grasp the concepts in this article.
How does Snapshot testing work?
As the name suggests, Snapshot testing records take a snap of the system. In Jest, this would be a render tree. Then it compares the recorded snapshot in future executions.
An example Snapshot test in Jest would be as follows.
it('renders list with one row', async () => {
const fetchProductList = jest.fn(() => {
new Promise(resolve => resolve(data)));
}const wrapper = mount(
<ProductsComponent fetchProductList={fetchProductList} />
);
wrapper.update();
expect(wrapper).toMatchSnapshot();
});
At the first execution, the toMatchSnapshot() function saves the snapshot of the particular component to a file. This will have the .snap extension. In subsequent executions, it will compare the component render tree with that snapshot and fail if there are any mismatches.
When this testing mechanism is followed, you don’t have to check for each element in the DOM tree to check whether they are rendered correctly.
With Snapshot testing, the number of lines written for a test will be significantly less.
However, suppose you introduce a new element to your component that will change the DOM tree. In that case, you need to update your snapshot to overwrite the stale snapshot. In Jest, it’s pretty straightforward with the following command.
jest --updateSnapshot
This is much easier than maintaining unit tests to check for elements in the DOM tree if done right. I will discuss more in the coming sections.
Benefits of Snapshot testing
Let’s have a look at few benefits of snapshot testing for our frontends.
- It introduces a clear pattern for testing component render trees.
- Faster and fewer lines of code than checking for component elements via unit tests —If you write the same in unit tests, you have to look for specific elements and values.
- Easier to update when the component changes.
- Easier to view code changes.
- Allows conditional rendering tests.
- Allows checking how components behave once you pass various combinations of props to them — Helps to validate if the passed data is properly reflected in the component.
You can combine it with other testing techniques for the best results while finding the right balance between them.
Limitations of Snapshot testing
Some argue whether snapshot testing is a curse. Well, like any other technology, this has a few drawbacks to it as well. Let’s find out.
- A large snapshot is of no use — If your snapshot is over 1000 lines, it’s humanly challenging to compare the changes. Therefore, snapshot testing is suitable only for small snapshots. However, there are ways to overcome the creation of large snapshots. One solution to this would be using ‘shallow’ rendering and testing only the component in question.
- Multi-language apps may run into issues — When a translation changes, there is a risk of snapshot tests failing even if the source code hasn’t changed. Suppose you are using react-intl library for translations. In that case, one solution to this is to mock react-intl so that it always returns the ID of translation, not its value.
- Conflict resolution can be a major hassle — Resolving merge conflicts in snapshots is a cumbersome task, especially if the snapshot is considerably large.
Apart from the above, I have come across another common issue. At first many developers tend to blindly update the snapshots when they come across a failing test.
However, blindly updating snapshots should never be done.
It will bypass issues in the component render tree due to source code updates, making the tests useless.
Summary
Snapshot testing is a handy tool to make sure your UI does not change unexpectedly. However, this should not be considered as a silver bullet for frontend testing. You should know when to use them effectively.
Even though snapshot tests are easier to create and maintain, you should remember that it is not a replacement for the unit or functional tests. Snapshot tests only verify that your application hasn’t changed, not that it’s working correctly.
Let me know your thoughts once you use snapshot testing in your applications too. Thanks for reading!
Build & share Javascript components with Bit
Bit is an extensible tool that lets you create truly modular applications with independently authored, versioned, and maintained components.
Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.
Bit: The platform for the modular web
Learn More
- Testing your React App with Puppeteer and Jest
- Creating a Component Library
- Testing React Components with Jest and Enzyme- In Depth
- End to End Testing React Apps With Cypress
Snapshot Testing for Frontends was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Viduni Wickramarachchi
Viduni Wickramarachchi | Sciencx (2021-07-22T22:54:35+00:00) Snapshot Testing for Frontends. Retrieved from https://www.scien.cx/2021/07/22/snapshot-testing-for-frontends/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.