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

时间:2017-11-29 10:23:29

标签: reactjs jestjs react-dom babel-jest

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

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

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

目前我的快照就像:

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

我想拥有它:

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

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

有可能获得这种结果吗?

谢谢

1 个答案:

答案 0 :(得分:0)

Jest / Enzyme无法实现,因为样式规则可以在任何地方:显式设置或通过从父元素继承来实现。

替代方法使用样式化的组件,因此您可以使用jest-styled-components来制作styled块的快照以及HTML。

或者您可以使用一些visual regression tool来制作和比较屏幕快照,而不是文本快照。

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