Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Support enhancing React component serializer #174

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

alistairjcbrown
Copy link
Contributor

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

@thymikee
Copy link
Member

Mind rebasing? :)

@alistairjcbrown alistairjcbrown force-pushed the support-enhancing-react-component-serializer branch from 783b640 to 1cfd88e Compare June 30, 2020 14:05
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 jest-community#162
@alistairjcbrown alistairjcbrown force-pushed the support-enhancing-react-component-serializer branch from 1cfd88e to 8fa0af8 Compare July 18, 2020 11:48
@alistairjcbrown
Copy link
Contributor Author

@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 🙇

@oleksii-kachura
Copy link

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
]);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Serializers not working as expected
3 participants