angular - 如何使用测试库、Jest 和 JSDOM 测试自定义元素/Web 组件？

Question

我正在尝试使用大量使用自定义元素的 Angular 应用程序testing-library/angular@11进行测试。jest@27.4.4

不幸的是，我不太确定 testing-library/JSDOM/Jest 是否不支持自定义元素的呈现，或者我是否遗漏了一些东西。我们使用的 stylelib 是用 stencil 构建的，没有使用 shadow-dom。

带有自定义元素的示例模板：

<div>
  <my-custom-element title="some-title"></my-custom-element>
</div>

渲染的自定义元素模板示例（在这种情况下，它只是使用提供的title-prop 渲染一个按钮）

<my-custom-element title="some-title">
  <button>some-title</button>
</my-custom-element>

如果我运行testing-library's render()-function 并打印screen，则呈现自定义元素标记，但其子组件不是：

<head>
  ...
</head>
<body>
  ...
  <div>
    <my-custom-element title="some-title"></my-custom-element>
  </div>
</body>

因此，如果我要运行expect(screen.getByRole("button")).toBeTruthy()测试将失败。

有一个对 shadow-dom 支持的公开拉取请求：https ://github.com/testing-library/dom-testing-library/pull/1069和https://dev.to/ionic/testing-web-components-in -react-4e49暗示目前无法测试 CE...

我错过了什么还是我只是在浪费时间？在这种情况下，我会争辩说，它也不是对实现细节的测试，因为在大多数情况下，我只想检查文本是否呈现到屏幕上。

0 回答 0