question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[jest-emotion] snapshots show every style changed when any html attribute or style changes

See original GitHub issue

Current 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

  1. Update snapshots
  2. Change any style or html attribute (such as the id value)
  3. 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.2
  • jest-emotion version: ^10.0.27

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
Andaristcommented, Apr 19, 2020

This is actually a bug in jest-snapshot package. I’ve located the problem and gonna try to prepare a fix.

0reactions
Jimmydaleclevelandcommented, Apr 23, 2020

You’re damn right I’m interested.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found