吐槽一下 Testing Library / Jest

有点鸡肋的 Query API

Testing Library 推荐使用 queryByRole、queryByText 这类 API，因为这类 API 更加符合用户视角，相较于 DOM 结构更加稳定。但是这些 API 存在一个非常恼人的限制，不能让我自由自在地编写稳定的测试代码，例如：

<button>
  <div>Option 1</div>
<button>
<span>Option 1</span>

如果我想要点击上面例子中的按钮，就必须得先用 findAllByText 找出所有的内容为「Option 1」的元素，然后再用 DOM 属性筛选出「按钮」。Testing Library 甚至还有一个 eslint 规则禁止使用 DOM 属性。

同样的需求在 Playwright 中的查询语法就非常简单：button:has-text(Option 1)。

Jest 几乎不再推荐使用真实浏览器来执行测试，所有的类真实浏览器环境 test-runner 都不再有官方的支持。这时我就非常怀念 Angular 提供的 Jasmine 测试框架，可以选择使用真实浏览器执行，完全不用像使用 JSDOM 一样需要顾虑是否用到了一些有限制的 API。

也是因为 JSDOM 的原因，一些在真实浏览器上工作正常的代码很容易在 JSDOM 上翻车，如果你比较注重用户体验，想要整一些酷炫的动画或者类似 Drag、Hover 等交互操作，那么 JSDOM 可以让你的复杂交互逻辑反复翻车。

Playwright 是近来非常流行的 e2e 测试框架，它使用魔改版的浏览器来执行测试，在 playwright 中我们几乎可以实现任何真实的用户操作，甚至是多开标签页。借助 playwright-ct，组件的单元测试也可以使用 playwright 编写。