[SOLVED] How queryBy without html tags with React testing library


This Content is from Stack Overflow. Question asked by meez

I use React testing library for my unit test.

After I query queryByTestId the component I receive something like:

 <p class="css-1317scs-myString" data-testid="my-string">&lt;iframe src="src="https://my-site.com?id=6533cf73&autoplay=false" allowfullscreen seamless frameborder="0" allow="encrypted-media"&gt;&lt;/iframe&gt;</p>

So with all the html tags etc.

      '<iframe src="https://my-site.com?id=6533cf73&autoplay=false" allowfullscreen seamless frameborder="0" allow="encrypted-media"></iframe>'

I just want to test if <iframe src="https://my-site.com?id=6533cf73&autoplay=false" allowfullscreen seamless frameborder="0" allow="encrypted-media"></iframe> is exactly defined like this.

How do I get rid of all those html tags. Or do I have to use another approach?


To get the content of all the elements inside of the queried element, you should use textContent on the queried element.

    .toBe('&lt;iframe src="src="https://my-site.com?id=6533cf73&autoplay=false" allowfullscreen seamless frameborder="0" allow="encrypted-media"&gt;&lt;/iframe&gt;');

Yes, the rendered string in your component will swap out the < angle bracket character for &lt;. React encodes the < and > characters automatically to prevent XSS attacks.

If you really want the brackets rendered, you can use React’s dangerouslySetInnerHtml attribute. You can use it like so:

<p data-testid="my-string" 

After applying the dangerouslySetInnerHTML attribute, you should see the actual < brackets rendered in your app and in your test.

This Question was asked in StackOverflow by meez and Answered by g0rb It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?