Jest快照不匹配 - Windows vs Unix / Linux Line Endings

Question

我们有一个由多个开发人员在多个操作系统上开发的项目。我们在更漂亮的配置中设置了120个字符的字符限制。我们的Windows机器正在生成与我们的linux / unix机器不同的快照。

窗口：

              <h4
                className="RightPanel__item--heading heading--headingBlocks
subHeading--headingBlocks subHeading--different"
              >

而在我们的linux / unix机器上，快照会生成以下行：

              <h4
                className="RightPanel__item--heading heading--headingBlocks subHeading--headingBlocks subHeading--different"
              >

对于linux / unix快照，代码在第119列结束，而Windows机器在最后几个属性之前生成一个新行。 我们使用React，Jest for Testing，eslint for linting，Babel for transformation。

相关配置

1. babelrc：transform：{＆＃34; ^。+ \ .jsx？$＆＃34;：＆＃34; babel-jest＆＃34; }
2. eslintrc：＆＃34; globals＆＃34;：{＆＃34; jest＆＃34;：true}
3. prettierrc：＆＃34; printWidth＆＃34;：120
4. prettierignore：* .snap

项目

React，Babel，Webpack，vanilla es6 +没有打字游戏的打字稿项目

研究

我们已尝试设置eslint＆＃34; linebreak-style＆＃34;：[＆＃34;错误＆＃34;，＆＃34; unix＆＃34;]以查看是否eslint更改将更新修复Windows的jest快照无济于事。我们确保了跨机器安装相同版本的游戏。与漂亮和eslint相同。

有关我们如何解决此问题的任何建议，以便测试不会因一个操作系统或其他操作系统而失败？

Answer 1

在团队中同步类似内容的最佳方法是使用EditorConfig。大多数代码编辑器都支持本机或通过扩展来支持它。

EditorConfig是一种通用的方法，用于指定编辑器设置（在您的情况下为行尾），所有操作系统上的所有代码编辑器都应遵守该设置。

https://editorconfig.org

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf

Answer 2

我们在我们的项目中使用快照序列化程序来避免此类问题，这也会对您有帮助。对于html快照，我建议jest-serializer-html

Answer 3

我们遇到了完全相同的问题，即Windows计算机生成的快照与Mac相比具有不同的换行符。

我们发现VS Code在Windows机器上设置为LF换行设置，并且更改为CRLF可以解决此问题。

我建议您在编辑器中以及链中其他任何位置检查行尾设置。