显示失败测试中预期和接收的全部输出

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 进行测试。我认为命令行参数 --expand 可以解决问题，但这似乎并没有改变输出（例如使用 yarn test -- --expand）我认为问题是通过 [=18= 传递命令行参数] 和 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.log 被 --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.

中使用的 react-scripts v3.4.1 的默认版本

测试中的解决方法是使用两个 .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 将失败，因此您需要将集合转换为数组并对它们进行排序以进行正确比较。

Answer 2

您可以在自己方便的时候捕获预期并格式化错误：

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

有创意，别介意我这里

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

这需要不计其数的检查（例如：如果 actual 缺少 Positions 或者它只是中断，它会打印 undefined 吗？）但是如果有效的话会很棒，不是吗？ ;-)

显示失败测试中预期和接收的全部输出

show entire output of expected and received in failed test

javascript

jestjs

create-react-app