Option to output diffs to the terminal

[CraigCav]

The Cypress snapshot tool has a custom reporter that looks like it will output diff images to the terminal.

This would be a neat addition to give feedback faster.

[CraigCav]

Something like this works as a proof-of-concept (if you're using iTerm):

/* eslint-disable */

/*
 * To enable this image reporter, add it to your `jest.config.js` "reporters" definition:
    "reporters": [ "default", "<rootDir>/image-reporter.js" ]
 */
const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const termImg = require('term-img');

function fallback() {
  // do nothing
}

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

  onTestResult(test, testResult, aggregateResults) {
    // reporter is only supported within iTerm.
    if (process.env.TERM_PROGRAM !== 'iTerm.app') return;

    if (testResult.numFailingTests && testResult.failureMessage.match(/different from snapshot/)) {
      console.log(chalk.red(`\n  (${chalk.underline.bold('Snapshot Diffs')})`));

      const parsedTestPath = path.parse(test.path);
      const diffOutputDir = path.join(parsedTestPath.dir, '__image_snapshots__', '__diff_output__');
      const files = fs.readdirSync(diffOutputDir);

      files.forEach(value => {
        const diffOutputPath = `${diffOutputDir}/${value}`;
        console.log(`\n  - ${diffOutputPath}\n`);
        termImg(diffOutputPath, { fallback });
      });
    }
  }
}

module.exports = ImageReporter;