javascript - 是否有可能扩展 Jest/Expect 匹配器

Question

我想扩展 Jest 的 isEqual 匹配器，以便在比较之前转换预期值(这允许我在测试中使用多行字符串)。我需要做的就是通过库中的 indentToFirstLine 函数运行预期值:indent-to-first-line，然后再将其传递给 isEqual。显然我不想在任何需要的地方都这样做，所以将它折叠成一个匹配器是有意义的，并且因为我想要与 Jest/Expect 的 isEqual 匹配器相同的功能，所以它是有意义的利用它。

我试过以下方法:

import indentToFirstLine from 'indent-to-first-line'
import expect from 'expect'

const toEqualMultiline = (received, expectedTemplateString) => {
  const expected = indentToFirstLine(expectedTemplateString)
  return expect(received).toEqual(expected)
}

export default toEqualMultiline

但是 expect(received).toEqual(expected) 没有返回值，所以我的匹配器返回的值在 undefined 中，导致 Jest 出错:

Unexpected return from a matcher function. Matcher functions should return an object in the following format: {message?: string | function, pass: boolean} 'undefined' was returned

我可以在我自己的匹配器中使用 toEqual 吗？

Answer 1

您可以使用 expect.extend()做到这一点。如果您使用 create-react-app ，您可以将下面的示例代码放在 setupTests.ts 中，以便它可以应用于您运行的所有测试:

expect.extend({
  toBeWithinRange(received, min, max) {
    const pass = received >= min && received <= ceiling
    return {
      message: () =>
        `expected ${received} to be in range ${floor} - ${ceiling}`,
      pass,
    }
  },
})

用法

it('should fail', () => {
  expect(13).toBeWithinRange(1, 10)
})

当运行上面的测试时，这是输出:

但我们可以做得更好。查看内置匹配器如何显示错误消息:

如您所见，错误更易于阅读，因为 expected 和 received 值具有不同的颜色，并且上面有一个匹配器提示来指示哪个是哪个。

为此，我们需要安装这个包 jest-matcher-utils并导入几个方法来漂亮地打印匹配器提示和值:

import { printExpected, printReceived, matcherHint } from "jest-matcher-utils"

const failMessage = (received, min, max) => () => `${matcherHint(
  ".toBeWithinRange",
  "received",
  "min, max"
)}

Expected value to be in range:
  min: ${printExpected(min)}
  max: ${printExpected(max)}
Received: ${printReceived(received)}`

expect.extend({
  toBeWithinRange(received, min, max) {
    const pass = received >= min && received <= max

    return {
      pass,
      message: failMessage(received, min, max),
    }
  },
})

现在看起来好多了，可以帮助您更快地确定问题

但是上面的代码中有一个小错误，当你否定断言时

expect(3).not.toBeWithinRange(1, 10)

输出是.toBeWithinRange而不是.not.toBeWithinRange:

expect(received).toBeWithinRange(min, max)

Expected value to be in range:
  min: 1
  max: 10
Received: 3

要解决这个问题，您可以根据 pass 值有条件地添加否定词

const failMessage = (received, min, max, not) => () => `${matcherHint(
  `${not ? ".not" : ""}.toBeWithinRange`,
  "received",
  "min, max"
)}

Expected value${not ? " not " : " "}to be in range:
  min: ${printExpected(min)}
  max: ${printExpected(max)}
Received: ${printReceived(received)}`

toBeWithinRange(received, min, max) {
  const pass = received >= min && received <= max

  return {
    pass,
    message: failMessage(received, min, max, pass),
  }
},

现在重新运行测试，你会看到:

如果为假则通过

expect(3).not.toBeWithinRange(1, 10)

expect(received).not.toBeWithinRange(min, max)

Expected value not to be in range:
  min: 1
  max: 10
Received: 3

如果 true 则通过

expect(13).toBeWithinRange(1, 10)

expect(received).toBeWithinRange(min, max)

Expected value to be in range:
  min: 1
  max: 10
Received: 13