snapshot-diff icon indicating copy to clipboard operation
snapshot-diff copied to clipboard

feat: Support enhancing React component serializer

Open alistairjcbrown opened this issue 4 years ago • 3 comments

snapshot-diff provides a convenience serializer for React components which renders them and serializes them before diffing. Support is already in place for allowing custom serializers to be added which will work at the root level; serializing unknown types (e.g. React component rendered with Enzyme).

However, there is no ability to update the serializers used within the React component serializer. The use case for this need to when a CSS-in-JS solution, such as Emotion, is used and custom serilization is required to support outputting the styles attached. Emotion provides this serializer, but adding at the root level then only outputs the styles and does not output the component.

To support this, the same defaultSerializers and setSerializers API as provided by snapshot-diff for adding root level serializers has been applied to the React component serializer to allow "sub-serializers" to be added which will then be passed into pretty-format. This then provides an API which will allow the Emotion serializer to work as expected with the rest of the React component serialization process.

Fixes #162

alistairjcbrown avatar Jun 28 '20 12:06 alistairjcbrown

Mind rebasing? :)

thymikee avatar Jun 30 '20 09:06 thymikee

@thymikee Apologies, I'd forgotten about this PR - that should be it rebased again and I've done another run through the readme changes to try and make them a little clearer 🤞 If you have time, let me know what you think of the approach and, if it's ok, if there's any changes you'd like made 🙇

alistairjcbrown avatar Jul 18 '20 11:07 alistairjcbrown

This change would be nice to have, it would allow me to have diffs consistent with the jest-styled-components snapshots

import snapshotDiff from 'snapshot-diff';
import { styleSheetSerializer } from 'jest-styled-components/serializer';

snapshotDiff.reactSerializer.setSerializers([
  styleSheetSerializer,
  ...snapshotDiff.reactSerializer.defaultSerializers
]);

oleksii-kachura avatar Feb 22 '21 11:02 oleksii-kachura