如何使用Jest在快照中获取CSS样式
我有以下问题,我不知道是否有可能使用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?