I have a test that is paring two sets, and when it fails the output is of the form:

    - Expected
    + Received

      Set {
        Position {
          "x": 0,
    -     "y": 0,
    +     "y": 2,
        },
        Position {
    -     "x": 1,
    -     "y": 1,
    +     "x": 0,
    +     "y": 0,
        },
        Position {
    -     "x": 2,
    +     "x": 1,
          "y": 1,
        },
        Position {
    -     "x": 2,
    -     "y": 0,
    +     "x": 1,
    +     "y": 2,
        },
      }

I find this very hard to read as it's just a text diff and the real discrepancy is obscured (the sets differ by 2 elements but the output makes it hard to tell which)

This is an app I created via create-react-app, and I'm running the tests using npm test or yarn test. I thought that the mand line arg --expand would do the trick but this doesn't seem to change the output (using yarn test -- --expand for instance) I thought the issue was passing mand line args thru npm and yarn but --silent seems to be working as expected so I think that's working.

I'm totally new to this modern front-end environment so forgive me if I'm mixing up tools here ...

This is the test, in case it's relevant:

test('calculate neighbors on the edge of the board', () => {
    let actual = neighbors(new Position(0,1));
    let expected = new Set([
        new Position(0,0),
        new Position(1,1),
        new Position(2,1),
        new Position(2,0),
    ]);
    console.log(actual);
    console.log(expected);
    expect(actual).toEqual(expected);
})

Those console.logs are suppressed by --silent which is why I think the args are being passed through. But maybe I misunderstand --expand ?

contents of package.json:

{
  "name": "tzaar-js",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^26.0.10",
    "immutable": "^4.0.0-rc.12",
    "konva": "^7.0.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-konva": "^16.13.0-3",
    "react-scripts": "3.4.1",
    "typescript": "^3.9.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I have a test that is paring two sets, and when it fails the output is of the form:

    - Expected
    + Received

      Set {
        Position {
          "x": 0,
    -     "y": 0,
    +     "y": 2,
        },
        Position {
    -     "x": 1,
    -     "y": 1,
    +     "x": 0,
    +     "y": 0,
        },
        Position {
    -     "x": 2,
    +     "x": 1,
          "y": 1,
        },
        Position {
    -     "x": 2,
    -     "y": 0,
    +     "x": 1,
    +     "y": 2,
        },
      }

I find this very hard to read as it's just a text diff and the real discrepancy is obscured (the sets differ by 2 elements but the output makes it hard to tell which)

This is an app I created via create-react-app, and I'm running the tests using npm test or yarn test. I thought that the mand line arg --expand would do the trick but this doesn't seem to change the output (using yarn test -- --expand for instance) I thought the issue was passing mand line args thru npm and yarn but --silent seems to be working as expected so I think that's working.

I'm totally new to this modern front-end environment so forgive me if I'm mixing up tools here ...

This is the test, in case it's relevant:

test('calculate neighbors on the edge of the board', () => {
    let actual = neighbors(new Position(0,1));
    let expected = new Set([
        new Position(0,0),
        new Position(1,1),
        new Position(2,1),
        new Position(2,0),
    ]);
    console.log(actual);
    console.log(expected);
    expect(actual).toEqual(expected);
})

Those console.logs are suppressed by --silent which is why I think the args are being passed through. But maybe I misunderstand --expand ?

contents of package.json:

{
  "name": "tzaar-js",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^26.0.10",
    "immutable": "^4.0.0-rc.12",
    "konva": "^7.0.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-konva": "^16.13.0-3",
    "react-scripts": "3.4.1",
    "typescript": "^3.9.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• javascript
• jestjs
• create-react-app

• Yarn does not require addituional -- Just yarn test --expand. Please share your npm scripts. – Alexander Alexandrov Commented Aug 21, 2020 at 6:41
• I'm not sure what to share but this is in package.json (I've added to the post) – okonomichiyaki Commented Aug 22, 2020 at 0:55
• using -- in your mand yarn test -- --expand isn't required – Kiran Maniya Commented Aug 22, 2020 at 1:10
• @KiranManiya right, yarn does print a warning with that. but if i remove the extra -- the output is the same, and the same as npm. not sure it matters to the question? – okonomichiyaki Commented Aug 22, 2020 at 20:19
• @Unbywyd i'm not sure i understand, the console logs were just to see if the arguments were passed through yarn/npm. does your ment have something to do with --expand ? – okonomichiyaki Commented Aug 22, 2020 at 20:20

2 Answers 2

Jest seems to have been changed in v24 to give less information. In Jest 23.6.0 the output you got is preceded by:

Expected value to equal:
  Set {{"x": 0, "y": 0}, {"x": 1, "y": 1}, {"x": 2, "y": 1}, {"x": 2, "y": 0}}
Received:
  Set {{"x": 0, "y": 2}, {"x": 0, "y": 0}, {"x": 1, "y": 1}, {"x": 1, "y": 2}}

This is not shown when the Jest version is changed to 24.9.0, which is the default with react-scripts v3.4.1 used in your package.json.

A workaround in your test is to use two .toContain matchers instead of a .toEqual:

expect(actual).toContain(expected);
expect(expected).toContain(actual);

This produces (from the first assertion):

Expected value: Set {{"x": 0, "y": 0}, {"x": 1, "y": 1}, {"x": 2, "y": 1}, {"x": 2, "y": 0}}
Received set:   Set {{"x": 0, "y": 2}, {"x": 0, "y": 0}, {"x": 1, "y": 1}, {"x": 1, "y": 2}}

Note that, unlike the .toEqual equivalent, .toContain fails if the order is different between the two sets, so you will need to convert the sets to arrays and sort them to pare properly.

You can catch the expect and format the error at your own convenience:

test('calculate neighbors on the edge of the board', () => {
    let errorFound = false;
    let actual = neighbors(new Position(0,1));
    let expected = new Set([
        new Position(0,0),
        new Position(1,1),
        new Position(2,1),
        new Position(2,0),
    ]);
    console.log(actual);
    console.log(expected);
    try {
      expect(actual).toEqual(expected);
    } catch (e) {
      console.error('your personalized error here');
      errorFound = true;
    }

    expect(errorFound).toBe(false); // this is not needed, but helps detecting errors
})

being creative, don't mind me here

test('calculate neighbors on the edge of the board', () => {

let actual = neighbors(new Position(0,1));
let expected = new Set([
    new Position(0,0),
    new Position(1,1),
    new Position(2,1),
    new Position(2,0),
]);
console.log(actual);
console.log(expected);
try {
  expect(actual).toEqual(expected);
} catch (e) {
  console.error('Mismatch between expected and actual neighbors');
  for (let i=0;i<expected.length;i++){
     try{
         expect(expected[i]).toMatch(actual[i])
     } catch (inner){
         console.error(`At pos ${i} expecting ${expected[i]} but found ${actual[i]}`);
     }
  }
}
})

This needs a zillion checks (e.g.: does it print undefined if actual gets short of Positions or it just breaks?) but would be great if worked, wouldn't it? ;-)