feat: Support enhancing React component serializer #174
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Mind rebasing? :) |
alistairjcbrown
force-pushed
the
support-enhancing-react-component-serializer
branch
from
783b640
to
1cfd88e
Compare
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
force-pushed
the
support-enhancing-react-component-serializer
branch
from
1cfd88e
to
8fa0af8
Compare
|
@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 🤞 |
|
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
defaultSerializersandsetSerializersAPIas provided by
snapshot-difffor adding root level serializers hasbeen 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 Emotionserializer to work as expected with the rest of the React component
serialization process.
Fixes #162