show entire output of expected and received in failed test

Question

I have a test that is comparing 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 command 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 command 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"
    ]
  }
}

user_7470360 · Answer

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 compare properly.

user_2729605 · Answer

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


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? ;-)

show entire output of expected and received in failed test

2 Answers