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

Question

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

它呈现以下 HTML 结构：

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

如何编写测试来检查 iframe 元素是否存在，例如 CSS class instagram-media?

Answer 1

出于可访问性目的，建议始终在 <iframe> 到 label/describe 其内容上使用 title 属性。

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

然后您可以使用 getByTitle 查询测试 <iframe> 元素是否存在。

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

How to test if iframe exists with React testing library?