Jest snapshots not matching - Windows vs Unix/Linux Line Endings

Question

We have a project developed by multiple developers on multiple operating systems. We have a character limit in our prettier config set to 120 characters. Our windows machines are producing snapshots different than our linux/unix machines.

windows:

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

whereas on our linux/unix machines the snapshot produces the following line:

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

For the linux/unix snapshot, the code ends right on column 119, whereas windows machines produce a new line before the last couple of attributes. We use React, Jest for Testing, eslint for linting, Babel for transformation.

Related Configuration

1. babelrc: transform: { "^.+\.jsx?$": "babel-jest" }
2. eslintrc: "globals": { "jest": true }
3. prettierrc: "printWidth": 120
4. prettierignore: *.snap

Project

React, Babel, Webpack, vanilla es6+ no typescript project with jest for testing

Research

We've tried setting the eslint's "linebreak-style": ["error", "unix"] to see if the eslint change would update the fix the jest snapshot for windows to no avail. We've ensured the same installed version of jest across machines. Same with prettier and eslint.

Any suggestions on how we might fix this issue so tests don't fail for one OS or the other?

Answer 1

The best way to synchronize something like this across a team is to use EditorConfig. Most code editors support it, either natively or through an extension.

EditorConfig is a universal way to specify editor setting, Line Endings in your case, that is respected by all code editors on all OSes.

https://editorconfig.org

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