0

I have an Angular project with Storybook as a design system. I want to integrate visual testing for it. I use Jest with puppeteer and image snapshot. Locally it is running fine but on GitLab, the pipeline is failing, because the font is rendered differently. I use a specific font but it is also included in the GitLab environment but it seems more stretched:

diff output from the pipeline

I also run the same docker container locally and on GitLab.

Here is my jest.config.js

process.env.JEST_PUPPETEER_CONFIG = 'node_modules/jest-puppeteer-docker/src/config.js';

module.exports = {
  preset: 'jest-puppeteer-docker',
  rootDir: '../',
  setupFilesAfterEnv: [
    '<rootDir>/.jest/jest-puppeteer.config.js'
  ],
  testMatch: [
    '<rootDir>/.storybook/visual-tests/*.visual-test.js'
  ]
};

And my jest-puppeteer.config.js

module.exports = {
  launch: {
    headless: true,
    args: [
      '--enable-font-antialiasing=false',
      '--font-render-hinting=medium',
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  }
};

It would be great if somebody could help me with this.

4

1 回答 1

0

前段时间有同样的问题。

就我而言，这是由于管道代理 (GitLab) 和我的本地开发人员操作系统的操作系统不同。字体可以根据操作系统以不同方式呈现。

开玩笑快照问题

至于现在我只相信有两种方法可以解决这个问题：

  1. 在 jest-snapshot 测试中启用最小故障阈值。不理想，但取决于文本的数量，它可能会起作用。在我们的例子中，我们有相当多的文本，这需要大约 1-2% 的失败阈值。在这个百分比下，我们开始看到其他视觉变化超过了测试阈值。因此，我们研究了第二种解决方案。

  2. 使用与捕获图像相同的操作系统运行 jest-snapshot 测试。在我的头顶上，我看到了两个解决方案：

    2.a. 启动与管道代理相同操作系统的 VM 并将其用于开发。

    2.b。将依赖于操作系统的映像包含到项目中。

我意识到这些解决方案都不是理想的，但我希望它们能帮助您找到最合适的前进方式。

干杯!

于 2020-03-10T14:38:50.223 回答