由于不同的类索引，使用 Styled-Components 的快照测试在 CI 管道中失败

Posted 2023-03-15

【中文标题】由于不同的类索引，使用 Styled-Components 的快照测试在 CI 管道中失败

【英文标题】：Snapshot tests with Styled-Components fail in the CI pipeline due to different class index

【发布时间】：2020-02-02 14:32:32

【问题描述】：

我正在使用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 | 

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

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

【问题讨论】：

对于样式化的组件，较小的版本更改可能会导致快照中使用的类索引发生更改。确保 package.json 文件中的版本号是恒定的。如果您需要灵活地使用修补程序，那么我建议对您的软件包版本使用tilde (~) 而不是caret(^)。要了解有关版本控制的更多信息，请参阅：***.com/a/22345808/3609255

【参考方案1】：

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

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