How to test if iframe exists with React testing library?

Question

In my React app I have a component which embeds an Instagram post.

It renders the following HTML structure:

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

I am using React testing library.

How do I write a test that checks if the iframe element exists and e.g with the CSS class instagram-media?

juliomalves · Accepted Answer · 2021-09-11 14:00:41Z

28

For accessibility purposes, it is recommended to always use the title attribute on an <iframe> to label/describe its content.

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

You can then test if the <iframe> element exists with the getByTitle query.

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

answered Sep 11, 2021 at 14:00

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tyson Nero Over a year ago

note that toBeInTheDocument() requires testing-library/jest-dom

aarowman Over a year ago

This just makes sure the title is there and is correct, it doesn't actually check that it's an iframe, or what its src attribute is, etc

juliomalves Over a year ago

@aarowman You can check what's in the src attribute with something like expect(screen.getByTitle('Instagram embed')).toHaveAttribute('src', '<src-url>'). Note that toHaveAttribute also requires testing-library/jest-dom.

aarowman Over a year ago

@juliomalves Yes, I was pointing out that the accepted answer doesn't actually test the kind of element or attributes of it. It simply tests for the existence of a title, which could be on another element, or have other attributes (the answer is not fully complete). Your suggestion will help with src, and there is also more that could be added

Collectives™ on Stack Overflow

How to test if iframe exists with React testing library?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related