reactjs - 如何使用 Jest 获取快照中的 CSS 样式

Question

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

我有一个 React 组件，我正在使用 Jest 来测试它。

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

目前我的快照如下:

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

我想要这样的:

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

我的应用程序使用webpack(sass-loader)来解析scss，所以没有问题。

有可能得到这样的结果吗？

谢谢

Answer 1

这对于 Jest/Enzyme 来说是不可能的，因为样式规则可以在任何地方:显式设置或从父元素继承。

替代方案是使用样式组件，这样您就可以使用 jest-styled-components 与 HTML 一起制作 styled block 的快照。 。

或者你可以使用一些visual regression tool这将制作和比较屏幕截图而不是文本快照。

PS 我想知道如果许多不同的测试仅仅因为我们调整了主题而被视为失败，这对于自动测试是否有效。是否值得努力分析和更新测试/快照/屏幕截图？