How to use snapshot-diff - 6 common examples

// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// 

import 'jest-extended';

import toDiffableHtml from 'diffable-html';
import { prosemirrorSerializer } from 'jest-prosemirror';
import { getSnapshotDiffSerializer, toMatchDiffSnapshot } from 'snapshot-diff';

expect.addSnapshotSerializer(getSnapshotDiffSerializer());
expect.extend({ toMatchDiffSnapshot });

if (__E2E__) {
  jest.setTimeout(120000);
}

/* Make unhandledRejection errors easier to debug */
process.on('unhandledRejection', reason => {
  console.error('REJECTION', reason);
});

/**
 * Serializer for HTML content.
 */
expect.addSnapshotSerializer({
  test: object => {

test('has different styles when on: true', () => {
  expect(
    snapshotDiff(serialize(), serialize())
  ).toMatchSnapshot()
})

import React from 'react'
import ReactDOM from 'react-dom'
import {Simulate} from 'react-dom/test-utils'
import * as glamor from 'glamor'
import {toMatchDiffSnapshot, getSnapshotDiffSerializer} from 'snapshot-diff'
import serializer, {fromHTMLString, fromDOMNode} from '../serializer'

expect.addSnapshotSerializer(getSnapshotDiffSerializer())
expect.addSnapshotSerializer(serializer)
expect.extend({toMatchDiffSnapshot})

function Button({count, ...props}) {
  const className = glamor.css({margin: 10 + count})
  return <button>
}

class Counter extends React.Component {
  state = {count: 0}
  increment = () =&gt; {
    this.setState(({count}) =&gt; ({count: count + 1}))
  }
  render() {
    const {count} = this.state
    return (</button>

test('props updated', () => {
    const $ = render(\sum_0^\infty);
    const $first = $.container.cloneNode(true);
    let $second;

    $.rerender(\sum_1^\infty);
    $second = $.container.cloneNode(true);

    expect(snapshotDiff($first, $second)).toMatchSnapshot();
  });