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

Bob*_* JS 6 reactjs jestjs react-dom babel-jest

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

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

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

目前我的快照是这样的:

<div id="main" className="myClass"></div>
Run Code Online (Sandbox Code Playgroud)

我想让它像:

<div id="main" style={Object {"float": "right"}}></div>
Run Code Online (Sandbox Code Playgroud)

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

有可能得到这种结果吗?

谢谢

sky*_*yer 0

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

替代方案是使用 styled-components ,这样您就可以使用jest-styled-componentsstyled来制作块与 HTML的快照。

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

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