首页 文章

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

提问于
浏览
3

我有以下问题,我不知道是否可以使用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

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

    替代方案是使用样式组件,因此您可以使用jest-styled-components与HTML一起制作 styled 块的快照 .

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

    PS我想知道这是否适合自动测试,如果很多不同的测试被视为失败只是因为我们已经调整了主题 . 是否值得分析和更新测试/快照/屏幕截图?

相关问题