gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 05:48:45 24 4
gpt4 key购买 nike

我正在尝试使用 testing-library/angular@11jest@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-libraryrender() 函数并打印 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/1069https://dev.to/ionic/testing-web-components-in-react-4e49提示目前无法测试 CE...

我是不是漏掉了什么,还是在浪费时间?在这种情况下,我认为它也没有测试实现细节,因为在大多数情况下我只想检查文本是否呈现在屏幕上。

最佳答案

您的网络组件未定义,这就是为什么只呈现标签而不是其内容的原因。您应该在测试设置中捆绑并加载所有 Web 组件(所有测试的包装器)。

关于angular - 如何使用 Testing-Library、Jest 和 JSDOM 测试自定义元素/Web 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70770810/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com