diff --git a/README.md b/README.md index 7fe913f..7275b5d 100644 --- a/README.md +++ b/README.md @@ -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", "/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. diff --git a/examples/image-reporter.js b/examples/image-reporter.js new file mode 100644 index 0000000..7ea0a45 --- /dev/null +++ b/examples/image-reporter.js @@ -0,0 +1,46 @@ +/* eslint-disable */ + +/* + * To enable this image reporter, add it to your `jest.config.js` "reporters" definition: + "reporters": [ "default", "/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;