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 不可能，因为样式规则可以在任何地方：显式设置或通过从父元素继承。

替代方案是使用 styled-components，因此您可以使用jest-styled-componentsstyled在 HTML 旁边制作块的快照。

或者您可以使用一些视觉回归工具来制作和比较屏幕截图而不是文本快照。

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