title: Use react testing library to test html elements rendered from dom manipulation of an external script/CDN
body: <p>I'm trying to test that an element rendered by an external script/CDN which added dynamically is loaded on a page but for some reason, the <code>render</code> method of the react testing library is not returning the element. Am i missing something?</p>
  <p>Details below :</p>
  <p>I have a hook <strong>useExampleHook</strong> which adds a script to the DOM dynamically. The script then calls a <strong>functionWhichAddsHTMLtoDOM</strong> which adds a button to the DOM.</p>
  <pre><code>import { useEffect } from 'react';
  
  export const useExampleHook = () =&gt; {
  
    useEffect(() =&gt; {
  
      const script = document.createElement('script');
  
      script.src =
        'https://xxxxxxx';
      script.async = true;
  
      script.onload = () =&gt; {
         functionWhichAddsHTMLtoDOM()
      };
  
      document.body.appendChild(script);
    }, []);
  };
  </code></pre>
  <p>In my jest test i am trying to find this element but it doesnt seem to exist</p>
  <pre><code>
  import { render, screen } from '@testing-library/react';
  import React from 'react';
  
  import { useExampleHook } from '.';
  test('correctly renders button', async () =&gt; {
    const Component = () =&gt; {
     useExampleHook();
      return &lt;div&gt;Testing Testing&lt;/div&gt;;
    };
  
  render(&lt;Component /&gt;);
  
  const button = await screen.getAllByText(/I am a button/i);
  </code></pre>