React Visual regression
Usually, we only test the javascript part of our components, leaving all styles behavior uncovered. We should test the responsiveness of our components, CSS ellipsis, empty props as well.
This package is based on Pupetter, keeping the browser ready, and handling tests with different pages in order to optimize performance.
Also will use the emulate tools from Pupetter to allow check our responsive designs without having to handle all resolutions on our code, only knowing if we want mobile, tablet or desktop test.
Usage
Install
npm install react-visual-regression
Use
; ;
Default options
; options = // Path to .css / .scss file stylesheet: undefined; device: devices'iPhone X' bodyPadding: 10
Device Emulation Select a device from the following list: https://github.com/GoogleChrome/puppeteer/blob/master/lib/DeviceDescriptors.js userAgent, width, height, deviceScaleFactor will be automatically used.
Integration Example
Usage with jest-image-snapshot
:
;; const component = <div> <h1>The Component</h1> </div>; ;
Real world example reusing settings
I recommend this folder structure for your components
my-component.tsx /.jsx => your component
my-component.scss / .css => your styling
my-component.test.tsx /.jsx => convencional javascript unit testing
my-component.visual.test.tsx / .jsx => visual regresion unit testing
With this pattern you can select when to run your visual regression tests with:
To run all tests
jest
To run only visual regresion tests
jest --testPathPattern="visual.test.tsx"
To ignore visual regresion tests
jest --testPathIgnorePatterns="visual.test.tsx"
Full Example
;;;;; expect; const cardComponent = name: string disabled: boolean = false: ReactReactElement const disabledClass = disabled ? "disabled" : ""; return <div className=`card `> <h1>Hello name</h1> </div> ;; ;
Benchmark
Follow up how this library was improving over the versions.
0.0.8 => 212 snapshots on 288s (about 4.5 minutes)