CSS Properties are duplicated in snapshot when using styled(...) syntax. about jest-styled-components HOT 5 CLOSED

Hello @tylerferguson, thanks for opening the issue.

It's interesting that you think there's a bug in the library, but this is how Styled Components work:

However, the value snapshot testing provides is keeping track of how the state changes over time and that works even in this case.

from jest-styled-components.

Hi @MicheleBertoli. Thanks for getting back to me. I understand that the latter property is what will be applied as per the CSS spec, but is that what a snapshot should show? Tracking how the styles change over time seems to be at odds with the idea of a 'snapshot' at a single point in time.

It gets quite confusing with larger classes too and doesn't wholly represent what is actually rendered as I would expect a snapshot to. Though you may argue that it is representative of what is actually rendered just not what you actually see ;).

I think that if the idea of snapshot testing is for us to 'see' the component as it would be then jest-styled-components is slightly (only slightly!) broken, as a change to the background CSS property in Button would break my snapshot for TomatoButton. Do you think there's any merit in that argument?

from jest-styled-components.

[...] analyze how state changes over time.

This is the purpose of Jest, which does it by taking snapshots.

I understand your confusion but I believe snapshots should represent what's rendered rather than what you see.

How would you expect the snapshot to be in the following scenario?

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
`

const TomatoButton = styled(Button)`
  display: none;
`

In any case, feel free to experiment in this area and send a PR.
The goal of this package is making testing a delightful experience, and any new idea is welcome.

from jest-styled-components.

[...] analyze how state changes over time.

Isn't this referring to taking multiple snapshots and how that allows you to see how state changes over time? Take a snapshot, click a button, take another snapshot and so on. Certainly, I wouldn't expect to see a dropdown menu both display and hide its options in one snapshot! But in several snapshots I can see how it has changed over time.

How would you expect the snapshot to be in the following scenario?

I would expect to see something like:

exports[`enzyme 1`] = `
.jUiOOZ {
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  display: none;
}

...
`;

However, if Button itself had a display property like so:

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  display: inline-block;
`

const TomatoButton = styled(Button)`
  display: none;
`

I would personally expect to see a snapshot that looks like:

exports[`enzyme 1`] = `
.jUiOOZ {
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
  display: none;
}

...
`;

Which is actually the same as the last snapshot and supports the idea that TomatoButton's snapshot should not break just because someone added an irrelevant (to us anyway) display: inline-block to Button.

I do understand the point you are making however, in that there would be nothing to 'see' in the above example, so perhaps that's not the right measure of a snapshot.

I think that the current output, while being a more accurate representation of what is happening with styled-components, is probably less helpful in testing than the alternative of keeping only the latter of the CSS properties that have been overridden.

Thanks for engaging in this discussion, it's been really helpful!

from jest-styled-components.

For reference, snapshots track how the state change over time (= between different executions of the same test).

being a more accurate representation of what is happening with styled-components

I guess this is the whole point of snapshots: you want to make sure your output doesn't change unexpectedly, which has nothing to do with what you see in the browser.

However, I'm curious to see what other people think about this.
Thanks you very much for spending time experimenting.

from jest-styled-components.