如何使用React测试库测试iframe是否存在？

Question

在我的 React 应用程序中，我有一个嵌入 Instagram 帖子的组件。

它呈现以下 HTML 结构：

<div data-testid="instagram"><iframe class="instagram-media instagram-media-rendered" id="instagram-embed-3" //etc....

我正在使用React 测试库。

如何编写一个测试来检查iframe元素是否存在，例如使用 CSS 类instagram-media？

Answer 1

出于可访问性的目的，建议始终使用title上的属性<iframe>来标记/描述其内容。

<div data-testid="instagram">
    <iframe title="Instagram embed" className="instagram-media ..." id="instagram-
embed-3"></iframe>
</div>

<iframe>然后，您可以通过查询测试该元素是否存在getByTitle。

expect(screen.getByTitle('Instagram embed')).toBeInTheDocument();