如何使用Jest在快照中获取CSS样式 [英] How to get CSS style in snapshot with Jest

问题描述

我有以下问题，我不知道是否有可能使用Jest +快照功能获得结果.

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

我有一个React组件，我正在使用Jest对其进行测试.

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

我希望快照包含 css 样式而不是 className .

I want the snapshot to include css style not className.

当前我的快照如下:

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

我想拥有它:

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

我的应用程序使用 webpack ( sass-loader )解析 scss ，因此在此没有问题.

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?

谢谢

推荐答案

Jest/Enzyme无法实现，因为样式规则可以在任何地方:显式设置或通过从父元素继承.

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我想知道这是否对自动测试有效，是否只是因为我们已经调整了主题而将许多不同的测试视为失败.分析和更新测试/快照/屏幕截图是否值得努力?

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?

这篇关于如何使用Jest在快照中获取CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！