[jest-emotion] snapshots show every style changed when any html attribute or style changes
See original GitHub issueCurrent behavior:
Snapshot errors do not show only the changed styles or attributes of a styled component when using the snapshotSerializer.
To reproduce:
Here is a minimal repo I created with the snapshot failure committed. Simply install (I’m using yarn) and run yarn test
to see it.
emotion-snapshot-issue-reproduction
- Update snapshots
- Change any style or html attribute (such as the
id
value) - Snapshot will fail as expected but show that every style in the component has changed
Expected behavior:
Snapshots should only show diff lines for the things that changed in a component. This used to be the behavior for all our tests but at some point it changed. I’m sorry I can’t figure out when, despite trying.
Environment information:
react
version: ^16.12.0@emotion/core
version: ^10.0.27@emotion/styled
version: ^10.0.2jest-emotion
version: ^10.0.27
Issue Analytics
- State:
- Created 3 years ago
- Comments:8 (8 by maintainers)
Top Results From Across the Web
Snapshot Testing - Emotion
By default snapshots with emotion show generated class names. Adding @emotion/jest allows you to output the actual styles being applied.
Read more >Snapshot Tests Classname With Emotion/Styled - ADocLib
[jestemotion] snapshots show every style changed when any html attribute Simply install I'm using yarn and run yarn test to see it. snapshot...
Read more >Is it possible to listen to a "style change" event? - Stack Overflow
Things have moved on a bit since the question was asked - it is now possible to use a MutationObserver to detect changes...
Read more >The case against React snapshot testing - ezCater
Our takeaways from experimenting with React snapshot testing at ezCater. ... CSS and want to make sure it gets applied in a style...
Read more >The Style Information element - HTML - MDN Web Docs
This text will be green. Inline styles take precedence over CSS included externally. The style attribute can override it, though.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This is actually a bug in
jest-snapshot
package. I’ve located the problem and gonna try to prepare a fix.You’re damn right I’m interested.