configuration for jest-styled-components & snapshot-diff

jest.setup-after.js

import { expect } from "@jest/globals";
import prettyFormat from "pretty-format";
import snapshotDiff from "snapshot-diff";
import "snapshot-diff/extend-expect";
import snapshot from "jest-snapshot";
import { styleSheetSerializer } from "jest-styled-components";

const prettyFormatOptions = {
  plugins: snapshot.getSerializers(),
};
// snapshot-diffから使うときにjestのシリアライザを参照しないので、同等物を埋め込む
const serializer = (x) => {
  return prettyFormat(x, prettyFormatOptions);
};

const styleSheetSerializerForSnapshotDiff = {
  ...styleSheetSerializer,
  print: (value) => styleSheetSerializer.print(value, serializer),
};

snapshotDiff.setSerializers([
  ...snapshotDiff.defaultSerializers,
  styleSheetSerializerForSnapshotDiff,
]);

expect.addSnapshotSerializer(snapshotDiff.getSnapshotDiffSerializer());