How to use jest-diff - 10 common examples

function expectedDiff(expected, computedStyles) {
  const received = Array.from(computedStyles)
    .filter(prop => expected[prop])
    .reduce(
      (obj, prop) =>
        Object.assign(obj, {[prop]: computedStyles.getPropertyValue(prop)}),
      {},
    )
  const diffOutput = jestDiff(
    printoutStyles(expected),
    printoutStyles(received),
  )
  // Remove the "+ Received" annotation because this is a one-way diff
  return diffOutput.replace(`${chalk.red('+ Received')}\n`, '')
}

function expectedDiff(expected, elementStyles) {
  const received = Object.keys(elementStyles)
    .filter(prop => expected[prop])
    .reduce((obj, prop) => Object.assign(obj, { [prop]: elementStyles[prop] }), {});

  const diffOutput = jestDiff(printoutStyles(expected), printoutStyles(received));
  // Remove the "+ Received" annotation because this is a one-way diff
  return diffOutput.replace(`${chalk.red('+ Received')}\n`, '');
}

const fail = (message: string, { expected, received }: any = {}) => {
    const extra = expected
      ? diff(expected, received, { expand: this.expand })
      : '';
    return {
      pass: false,
      message: () =>
        `${message}\n${extra}\nRequest received:\n${JSON.stringify(
          response.body,
          null,
          2,
        )}`, // eslint-disable-line no-magic-numbers
    };
  };

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.compareArrayBuffers = compareArrayBuffers;

// this are dev dependencies
var diff = require("jest-diff");

var _require = require("jest-diff/build/constants"),
    NO_DIFF_MESSAGE = _require.NO_DIFF_MESSAGE;

var _require2 = require("@webassemblyjs/wasm-parser"),
    decode = _require2.decode;

var oldConsoleLog = console.log;

function compareArrayBuffers(l, r) {
  /**
   * Decode left
   */
  var bufferL = "";

  console.log = function () {
    for (var _len = arguments.length, texts = new Array(_len), _key = 0; _key < _len; _key++) {
      texts[_key] = arguments[_key];
    }

// this are dev dependencies
var diff = require("jest-diff");

var _require = require("jest-diff/build/constants"),
    NO_DIFF_MESSAGE = _require.NO_DIFF_MESSAGE;

var _require2 = require("@webassemblyjs/wasm-parser"),
    decode = _require2.decode;

var oldConsoleLog = console.log;
export function compareArrayBuffers(l, r) {
  /**
   * Decode left
   */
  var bufferL = "";

  console.log = function () {
    for (var _len = arguments.length, texts = new Array(_len), _key = 0; _key < _len; _key++) {
      texts[_key] = arguments[_key];
    }

const state = this.state;
    const key = story.name;
    const context = { kind: this.kind, story: story.name };
    const tree = story.render(context);
    const renderer = ReactTestRenderer.create(tree);
    const actual = renderer.toJSON();

    const result = state.match(story.name, actual, key);

    const outcome = this.getOutcome();

    if (outcome !== 'unmatched') {
      return { state: outcome };
    }

    const diffMessage = diff(
      result.expected.trim(),
      result.actual.trim(),
      {
        aAnnotation: 'Snapshot',
        bAnnotation: 'Current story',
      },
    );

    if (this.interactive) {
      const shouldUpdate = await this.confirmUpate(diffMessage);
      if (shouldUpdate) {
        state.update = true;
        state.match(story.name, actual, key);
        state.update = false;
        return { state: 'updated' };
      }

const diffs = matched.map((action, i): string | null => {
            return `"${actionType}" action #${i} payloads:\n\n${diff(payload, action.payload, { bAnnotation: "Dispatched" })}`;
          }).join("\n\n");
          message = `"${actionType}" action has been dispatched, but payload isn't matched to the expectation\n\n${diffs}`;

: () => {
          const difference = diff(expected, data, {
            expand: this.expand
          })
          return (
            this.utils.matcherHint('toHaveBeenDispatchedWith', undefined, undefined, options) +
            '\n\n' +
            (difference &&
              `Expected: ${this.utils.printExpected(expected)}\n` + `Received: ${this.utils.printReceived(data)}`)
          )
        }

export function printVariablesDoesNotMatchError(
  queryMockConfig: MockGraphQLConfig,
  shouldMatchOnVariables: boolean,
  operationName: string,
  variables: Variables
): void {
  if (shouldMatchOnVariables) {
    let errorStr = `Variables do not match for operation "${operationName ||
      'unknown'}"`;

    if (queryMockConfig.matchVariables) {
      throw new Error(`${errorStr} due to custom "matchOnVariables" function`);
    } else {
      throw new Error(
        `${errorStr}.\n\nVariables in request VS mocked variables: \n${printDiff(
          variables,
          queryMockConfig.variables
        )}`
      );
    }
  }
}

const message = () =>
      `Difference:\n${diff(expectedDocument, receivedDocument)}`;
    return { actual: received, message, pass };