Compability with snapshot-diff

[microcipcip]

Is this library supposed to work with snapshot-diff? I see different class output when using it like this:

import 'jest-styled-components'
import { render } from 'react-testing-library'
import snapshotDiff from 'snapshot-diff'
import Component from '../Component'

it('', async () => {
  const { container: containerWithIntro } = render(
    <Component intro />
  )
  const { container } = render(
    <Component />
  )
  expect(snapshotDiff(containerWithIntro, container)).toMatchSnapshot()
})

[alextrastero]

ping

// setupTests.ts
import { toMatchDiffSnapshot } from 'snapshot-diff';
import 'jest-styled-components';

expect.extend({ toMatchDiffSnapshot });

[AtnesNess]

Not sure if it's on time but here what you can do to achive what you need:

import { styleSheetSerializer } from 'jest-styled-components';
import { diff } from 'jest-diff';

snapshot.addSerializer(styleSheetSerializer);

const identity = (value: any) => value;
expect.extend({
  toMatchDiffSnapshot(valueA, valueB) {
    const stringA = snapshot.utils.serialize(valueA);
    const stringB = snapshot.utils.serialize(valueB);

    const result = diff(stringA, stringB, {
      aColor: identity,
      bColor: identity,
      changeColor: identity,
      commonColor: identity,
      patchColor: identity,
      expand: false,
      includeChangeCounts: true,
      aAnnotation: 'First value',
      bAnnotation: 'Second value',
    });

    return snapshot.toMatchSnapshot.call(this as any, `Snapshot Diff:\n${result}`, '');
  },
});