探索自定义 Jest 匹配器，让 Vitest 与众不同

对于编写健壮且可维护的测试用例，选择合适的断言库至关重要。在 JavaScript 测试领域，Jest 凭借其直观语法和丰富的功能集脱颖而出。然而，当涉及到测试 CSS 字符串时，Jest 的默认匹配器显得力不从心。

为了解决这一痛点，Vitest 横空出世，它是一个快速且用户友好的测试框架，继承了 Jest 的优点，同时提供了一些额外的功能，例如开箱即用的 CSS 字符串匹配。这使得在 Vitest 中编写 CSS 相关测试变得轻而易举，但我们还可以更进一步。

自定义 Jest 匹配器为我们提供了根据特定需求定制测试逻辑的强大能力。让我们深入了解如何使用 Vitest 创建一个自定义 Jest 匹配器，以简化 CSS 字符串匹配测试的编写。

构建基本匹配逻辑

我们的自定义匹配器将用于验证 CSS 字符串是否与预期值匹配。为了实现这一点，我们将使用 expect(actual).toMatchCSS(expected) 匹配器。

expect(actual).toMatchCSS(expected);

增强自定义匹配器

有了基本匹配逻辑之后，我们就可以对自定义匹配器进行一系列增强。首先，我们可以添加一个 not 变体，用于否定匹配：

expect(actual).not.toMatchCSS(expected);

接下来，我们可以实现一个 toHaveCSSRule 匹配器，用于检查 CSS 字符串中是否存在特定 CSS 规则：

expect(actual).toHaveCSSRule(rule);

Jest 与 Vitest：两大测试框架的对比

在了解了如何在 Vitest 中创建自定义 Jest 匹配器之后，让我们将 Vitest 与 Jest 进行一下对比，看看它们在 CSS 字符串匹配方面的优势。

特性	Jest	Vitest
开箱即用 CSS 字符串匹配	否	是
自定义 Jest 匹配器	是	是
toMatchCSS 匹配器	无	是
toHaveCSSRule 匹配器	无	是（实验性）

正如你所见，Vitest 在 CSS 字符串匹配方面提供了更开箱即用的体验和更丰富的匹配器选择。如果你正在寻找一种方法来简化 CSS 相关测试的编写，那么 Vitest 绝对值得一试。

结论

通过创建自定义 Jest 匹配器，我们可以显著简化 Vitest 中 CSS 字符串匹配测试的编写。通过添加 not 变体和 toHaveCSSRule 匹配器，我们进一步增强了匹配器的功能性。在考虑 Jest 与 Vitest 时，Vitest 在 CSS 字符串匹配方面的优势使其脱颖而出。

我希望这篇文章帮助你了解如何利用 Vitest 的强大功能来编写更强大、更全面的测试用例。祝你测试愉快！