How to get CSS style in snapshot with Jest

问题

I have the following question, I don't know if its possible to get the result using Jest + snapshot feature.

I have a React components and I'm using Jest to test it.

I want the snapshot to include css style not className.

Currently my snapshot is like:

<div id="main" className="myClass"></div>

I would like to have it like:

<div id="main" style={Object {"float": "right"}}></div>

My App its using webpack(sass-loader) for parsing scss, so over there there are no issues.

It is possible to get this kind of result?

Thanks

回答1:

it is not possible with Jest/Enzyme since style rules can be anywhere: set up explicitly or goes through inheritance from parent element.

Alternatives are using styled-components so you could make snapshots of styled block alongside HTML with jest-styled-components.

Or you can use some visual regression tool that will make and compare screenshots instead of text snapshots.

PS I'm wondering if this is valid thing for automatic testing if a lot of different tests are treated as failed just because we have tuned up theming. Is it worth efforts to analyze and update tests/snapshots/screenshots?

来源：https://stackoverflow.com/questions/47550435/how-to-get-css-style-in-snapshot-with-jest