如何测试iframe是否存在与React测试库?

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

出于可访问性的目的，建议始终在<iframe>上使用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();