Snapshot formatting does not match between local and CircleCI build

MGray55 commented 6 years ago

🐛 Bug Report

Similar to previous issue https://github.com/facebook/jest/issues/3813 Was working until 06/12/2018. Space being inserted in className definitions as displayed below (see rt-rh and rt-resizeable-header'

Snapshot formatting between local (MacOSX) and CircleCI build slightly different causing test failure `
expect(value).toMatchSnapshot()

Received value does not match stored snapshot 1.

- Snapshot
+ Received

@@ -172,11 +172,11 @@
            className="rt-tr"
            role="row"
            style={undefined}
          >
            <div
-             className="rt-th  rt-resizable-header -cursor-pointer"
+             className="rt-th rt-resizable-header -cursor-pointer"
              onClick={[Function]}
              role="columnheader"
              style={
                Object {
                  "flex": "100 0 auto",
@@ -196,11 +196,11 @@
                onMouseDown={[Function]}
                onTouchStart={[Function]}
              />
            </div>
            <div
-             className="rt-th  rt-resizable-header -cursor-pointer"
+             className="rt-th rt-resizable-header -cursor-pointer"
              onClick={[Function]}
              role="columnheader"
              style={
                Object {
                  "flex": "100 0 auto",
@@ -220,11 +220,11 @@
                onMouseDown={[Function]}
                onTouchStart={[Function]}
              />
            </div>
            <div
-             className="rt-th  rt-resizable-header -cursor-pointer"
+             className="rt-th rt-resizable-header -cursor-pointer"
              onClick={[Function]}
              role="columnheader"
              style={
                Object {
                  "flex": "100 0 auto",

  32 |     expect.assertions(1);
  33 |     const tree = component.toJSON();
> 34 |     expect(tree).toMatchSnapshot();
  35 |   });
  36 | 

  at Object.<anonymous> (src/components/Drilldowns/UsersAndVideo/RoomSystemsTable.test.tsx:34:18)`

To Reproduce

Original test is pretty straight forward. The code formatting in question is on happening on the header of a react-table component:

it('should render', () => {
    const component = create(
            <ReactRedux.Provider store={store}>
              <RoomSystems
                 isFetching={false}
                data={[]}
             />
            </ReactRedux.Provider>);
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });

Expected behavior

The formatting of snapshots in each environments should match when using the same package.json for dependencies.

Currently using:

"types/jest": "^22.2.3",
"jest": "^22.4.4", (sub-dependency to pretty-format "version": "22.4.3")
"jest-junit": "^3.6.0",
"ts-jest": "^22.4.3"

But also tried updating to (with no change in result):

"types/jest": "^23.0.2",
"jest": "^23.1.0",
"pretty-format": "^23.0.1",
"jest-junit": "^5.0.0",
"ts-jest": "^22.4.6"

MGray55 commented 6 years ago

Got around different whitespace in snaps (on OSX vs Linux) by using

jest.mock('react-table', () => 'ReactTable');

I don't need to test React Table in my unit tests - (which is where the whitespace issue is happening). Wanted to post findings here in case anyone else runs into a similar error.

shirbr510 commented 6 years ago

@MGray55 your solution did not solve it for me...

github-actions[bot] commented 3 years ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

jestjs / jest