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.log
s 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"
]
}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With