How to use the jest-diff function in jest-diff

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
    };
  };

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 };

: () => {
          const diffString = diff(expected, received, { expand: this.expand });
          return (
            this.utils.matcherHint(".toReceiveMessage", "WS", "expected") +
            "\n\n" +
            `Expected the next received message to equal:\n` +
            `  ${this.utils.printExpected(expected)}\n` +
            `Received:\n` +
            `  ${this.utils.printReceived(received)}\n\n` +
            `Difference:\n\n${diffString}`
          );
        };

: () => {
          const diffString = diff(expected, received, {
            expand: this.expand,
          });
          return (
              this.utils.matcherHint('.toInclude') +
              '\n\n' +
              `Expected value to include (using str.includes):\n` +
              `  ${this.utils.printExpected(expected)}\n` +
              `Received:\n` +
              `  ${this.utils.printReceived(received)}` +
              (diffString ? `\nDifference:\n${diffString}` : '')
          );
        };
    return {actual: received, message, pass};