由于类索引不同，具有样式化组件的快照测试在 CI 管道中失败

Question

我正在使用react-testing-library和jest-styled-components进行快照测试。它以前一直工作正常，但现在许多组件的快照测试在 CI 管道 (Gitlab( 中失败，仅仅是因为jest-styled-components生成的哈希类名占位符中的索引不同：

- Snapshot
+ Received
@@ -1,19 +1,19 @@
- .c4 {
+ .c3 {
font-size: 14px;
height: 14px;
min-height: 14px;
min-width: 14px;
width: 14px;
}
- .c4 > svg {
+ .c3 > svg {
fill: currentColor;
pointer-events: none;
}
- .c4 > svg * {
+ .c3 > svg * {
height: 100%;
width: 100%;
}
.c2 .ant-calendar-picker-input.ant-input {
@@ -26,15 +26,15 @@
.c0 {
position: relative;
}
- .c3 {
+ .c4 {
color: #00293a;
}
- .c1 .c3 {
+ .c1 .c4 {
color: #00293a;
}
<div>
<div
@@ -49,11 +49,11 @@
placeholder="Select date"
readonly=""
value=""
/>
<div
-           class="ant-calendar-picker-icon c3 c4"
+           class="c3 c4 ant-calendar-picker-icon"
data-testid="icon_arrowDown"
size="14"
>
<file-mock />
</div>
21 |   it('renders correctly', () => {
22 |     const { container } = renderWithProps()
> 23 |     expect(container).toMatchSnapshot()
|                       ^
24 |   })
25 | })
26 | 

在本地运行测试时，没有问题。

有人知道出了什么问题吗？

Answer 1

确保在本地和 CI 中使用相同的版本的包解决了这个问题。

删除node_modules并运行与 CI 中相同的安装命令后，在本地运行测试会更改快照。我更新了快照，提交并推送了更改，管道成功运行。