-
Notifications
You must be signed in to change notification settings - Fork 38
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
Serializers not working as expected #162
Comments
It appears the underlying issue is that this API integrates with the older |
Do you have any more details on this? That may be an issue, but I'm not sure it's the issue here. From your repo - let's run through each test
The expectation was, that by adding the Emotion serializer that we'd also see styles being output in React components. However, serializers added through Proposed solution
|
Hi @alistairjcbrown thanks for getting back. Sorry I did investigate further but didn't update this ticket. The rub seems to be in the second of your proposed solutions. Essentially, the I think there may be an additional issue thought with the fact that |
I think you're right that that may be an issue as serializers without We should probably create an issue to track updating |
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
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
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
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
I've been playing around with snapshot-diff and it seems like it can really simplify my tests - the only thing is, whenever I change the internal implementation of my component, even if it doesn't affect any functionality, all the emotion classNames break. It looks like the PR could potentially fix this issue! If it makes it in I can promise it will make my day 😜 |
Ugh, I need to get back to reviewing that 😅 hopefully this weekend! |
I was surprised to learn that snapshot-diff doesn't pass the serializers to pretty-format, I'd expect it to do what jest-snapshot does: https://github.com/facebook/jest/blob/03cf86f60c42036a183c4fecac24882a06835427/packages/jest-snapshot/src/utils.ts#L162-L175 |
I've filed a mirror issue here: emotion-js/emotion#1898
Can't get the
setSerializer
API to work as expected.I've created a minimal reproduction repo here explaining the issue in more detail:
https://github.com/DarkPurple141/jest-emotion-typescript-minimal/tree/master
The text was updated successfully, but these errors were encountered: