Skip to content

tvthatsme/visual-regression-jest

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Tests

Visual Regression Testing with Jest

As developers, it is our job to ensure that our users receive the same experience that our UX colleagues design and trust us to implement. So, throughout the development life of a project, how can we make sure that the visuals are always correct? You could manually click through every possible user journey and check, but there has to be a better way.

Enter automated visual regression testing. Keep an image of your component in its perfect state and compare that with the result of any code changes to ensure that no unexpected visual changes slip through unnoticed.

This is accomplished by combining jest, jest-image-snapshot, puppeteer, and docker to acheive one-to-one pixel-perfect comparisons in any environment. This repo serves as a demonstration of how to set this up for a real-life project.

Full details can be found in this article.