我正在尝试使用 testing-library/angular@11 和 jest@27.4.4 来测试 Angular 应用程序，它大量使用自定义元素。
不幸的是，我不太确定 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 的 render() 函数并打印 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...
我是不是漏掉了什么，还是在浪费时间？在这种情况下，我认为它也没有测试实现细节，因为在大多数情况下我只想检查文本是否呈现在屏幕上。
最佳答案
您的网络组件未定义，这就是为什么只呈现标签而不是其内容的原因。 您应该在测试设置中捆绑并加载所有 Web 组件(所有测试的包装器)。
关于angular - 如何使用 Testing-Library、Jest 和 JSDOM 测试自定义元素/Web 组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70770810/