在失败的测试中显示预期和收到的整个输出

Question

我有一个比较两组的测试，当它失败时，输出的形式如下：

    - 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,
        },
      }

我发现这很难阅读，因为它只是一个文本差异，真正的差异被掩盖了（集合相差 2 个元素，但输出很难分辨哪个）

这是我通过创建的应用程序create-react-app，我正在使用npm test或运行测试yarn test。我认为命令行 arg--expand可以解决问题，但这似乎并没有改变输出（yarn test -- --expand例如使用）我认为问题是通过命令行 args 传递npm，yarn但--silent似乎按预期工作，所以我认为这是有效的。

我对这个现代前端环境完全陌生，所以如果我在这里混淆了工具，请原谅我......

这是测试，以防万一：

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

那些console.logs 被抑制了，--silent这就是为什么我认为 args 被传递了。但也许我误解了--expand？

内容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"
    ]
  }
}

Answer 1

Jest 似乎在 v24 中进行了更改，以提供更少的信息。在 Jest 23.6.0 中，您得到的输出前面是：

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}}

当 Jest 版本更改为 24.9.0 时，不会显示这一点，这是package.json.

测试中的解决方法是使用两个.toContain匹配器而不是.toEqual：

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

这会产生（从第一个断言）：

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}}

请注意，与.toEqual等效项不同，.toContain如果两个集合之间的顺序不同，则会失败，因此您需要将集合转换为数组并对它们进行排序以便正确比较。