Skip to content

Commit

Permalink
docs(README) Add some notes about capturing diff images (#82)
Browse files Browse the repository at this point in the history
  • Loading branch information
john-housser authored and anescobar1991 committed Jun 7, 2018
1 parent 0ce55c6 commit 7fb8410
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 0 deletions.
12 changes: 12 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,18 @@ const toMatchImageSnapshot = configureToMatchImageSnapshot({
expect.extend({ toMatchImageSnapshot });
```

### Recipes

#### Upload diff images from failed tests

[Example Image Upload Test Reporter](examples/image-reporter.js)

If you are using jest-image-snapshot in an ephemeral environment (like a Continuous Integration server) where the file system does not persist, you might want a way to retrieve those images for diagnostics or historical reference. This example shows how to use a custom [Jest Reporter](https://facebook.github.io/jest/docs/en/configuration.html#reporters-array-modulename-modulename-options) that will run after every test, and if there were any images created because they failed the diff test, upload those images to an [AWS S3](https://aws.amazon.com/s3/) bucket.

To enable this image reporter, add it to your `jest.config.js` "reporters" definition:

"reporters": [ "default", "<rootDir>/image-reporter.js" ]

## How it works
Given an image (Buffer instance with PNG image data) the `toMatchImageSnapshot()` matcher will create a `__image_snapshots__` directory in the directory the test is in and will store the baseline snapshot image there on the first run. Note that if `customSnapshotsDir` option is given then it will store baseline snapshot there instead.

Expand Down
46 changes: 46 additions & 0 deletions examples/image-reporter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* eslint-disable */

/*
* To enable this image reporter, add it to your `jest.config.js` "reporters" definition:
"reporters": [ "default", "<rootDir>/image-reporter.js" ]
*/

const chalk = require('chalk');
const fs = require('fs');
const AWS = require('aws-sdk/global');
const S3 = require('aws-sdk/clients/s3');

const UPLOAD_BUCKET = 'YOUR_S3_BUCKET_NAME';

const s3 = new AWS.S3({ apiVersion: '2006-03-01' });

class ImageReporter {
constructor(globalConfig, options) {
this._globalConfig = globalConfig;
this._options = options;
}

onTestResult(test, testResult, aggregateResults) {
if (testResult.numFailingTests && testResult.failureMessage.match(/different from snapshot/)) {
const files = fs.readdirSync('./__tests__/__image_snapshots__/__diff_output__/');
files.forEach((value) => {
const path = `diff_output/${value}`;
const params = {
Body: fs.readFileSync(`./__tests__/__image_snapshots__/__diff_output__/${value}`),
Bucket: UPLOAD_BUCKET,
Key: path,
ContentType: 'image/png',
};
s3.putObject(params, (err) => {
if (err) {
console.log(err, err.stack);
} else {
console.log(chalk.red.bold(`Uploaded image diff file to https://${UPLOAD_BUCKET}.s3.amazonaws.com/${path}`));
}
});
});
}
}
}

module.exports = ImageReporter;

0 comments on commit 7fb8410

Please sign in to comment.