如何使用 Jest 在快照中获取 CSS 样式

IT技术 reactjs jestjs react-dom babel-jest
2021-05-11 13:37:02

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

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

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

目前我的快照是这样的:

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

我想让它像:

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

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

有可能得到这种结果吗?

谢谢

1个回答

使用 Jest/Enzyme 是不可能的,因为样式规则可以在任何地方:显式设置或从父元素继承。

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

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

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