@proof-ui/image-snapshot-plugin
v0.3.6
Published
Provides Proof with visual regression testing capabilities by porting over functionality from (jest-image-snapshot)[https://github.com/americanexpress/jest-image-snapshot].
Downloads
14
Readme
@proof-ui/image-snapshot-plugin
Provides Proof with visual regression testing capabilities by porting over functionality from (jest-image-snapshot)[https://github.com/americanexpress/jest-image-snapshot].
Installation
yarn add -D @proof-ui/image-snapshot-plugin
Usage
// proof.config.js
import ImageSnapshotPlugin from '@proof-ui/image-snapshot-plugin';
export default {
plugins: [
new ImageSnapshotPlugin({
// Configuration
})
]
};
The image snapshot plugin closely mimics the normal react/jest snapshot testing workflow.
Start by writing a proof snapshot test for your story. The plugin provides a method on the browser
object that will create a snapshot for you.
const proofs = proofsOf('Button');
proofs.add('Basic Usage', async ({ browser }) => {
await browser.matchImageSnapshot();
});
Multipe snapshots can be taken per test.
const proofs = proofsOf('Button');
proofs.add('Basic Usage', async ({ browser }) => {
await browser.matchImageSnapshot();
const button = await browser.$('button');
await button.click();
await browser.matchImageSnapshot();
});
The matchImageSnapshot
method can be configured individually by passing an options parameters to the functions. It takes all the same options available to (jest-image-snapshot)[https://github.com/americanexpress/jest-image-snapshot].
await browser.matchImageSnapshot({
failureThresholdType: 'percent',
failureThreshold: 0.01
});
It can also be configured globally:
// proof.config.js
export default {
plugins: [
new ImageSnapshotPlugin({
globalMatchOptions: {
failureThreshold: 0.01,
diffDirection: 'horizontal'
}
})
]
};
In addition to all the options from jest-image-snapshot. This library adds a couple more to help with proof. It adds windowHeight
, windowWidth
, and augments the customSnapshotIdentifier function for more nuanced snapshot naming.
await browser.matchImageSnapshot({
windowHeight: 714,
windowWidth: 1214,
customSnapshotIdentifier({ currentTestName, counter }) {
return `${this.browserName}-${currentTestName}-${this.windowWidth}x${this.windowHeight}-${counter}`;
}
});
After adding snapshot tests you can run your proof test suite as normal.
# Command Line Usage
proof
To update your snapshot baseline images add the updateSnapshots
flag.
# Command Line Usage
proof --updateSnapshots
Options
You can configure the ImageSnapshotPlugin through some options in it's constructor:
| Property | Description | Type | Default |
| ------------ | ---------------------------------------------------------------------------------------- | -------- | ------------------- |
| getSnapshotsDir
| A function that returns a string path that tells the plugin where to save image snapshots. | function
| () => components/${kind}/src/__image_snapshots__
|
| globalMatchOptions
| (jest-image-snapshot)[https://github.com/americanexpress/jest-image-snapshot] options that will be applied globally. | ImageSnapshotArgs
| |
For ideas on how to incorporate this into your CI flow. Check out (this article)[https://baseweb.design/blog/visual-regression-testing/].