title: React test - error when component accesses window object
body: <p>For a specific reason I use a script in the <code>index.html</code> file in the <code>public</code> folder, this script creates a property on the <code>window</code> object. The property is an asynchronous function. here is the script i created in public/index.html:</p>
  <pre><code> &lt;script&gt;
        const txt = &quot;Hello Word&quot;;
  
        async function waitText() {
          try {
            const data = await fetch(
              &quot;https://jsonplaceholder.typicode.com/all/1&quot;
            );
            const text = await data.json();
            returntext;
          } catch (error) {
            console.error(error);
            return &quot;Error&quot;;
          }
        }
  
        Object.defineProperty(window, &quot;waitText&quot;, { value: waitText });
      &lt;/script&gt;
  </code></pre>
  <p>My App component starts by rendering a Loading... text specified in a useState, then an asynchronous function in useEffect calls the function of the windom object, waits for the response and does the setState and changes the Loading... text to the one it got from the api. So far the app works without problems. Here the code of App.tsx</p>
  <pre><code>import logo from &quot;./logo.svg&quot;;
  import &quot;./App.css&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  
  function App() {
    const [txt, setTxt] = useState(&quot;Loading...&quot;);
  
    useEffect(() =&gt; {
      const getTxt = async() =&gt; {
        try {
          const text = await window.waitText();
          setTxt(text.title);
        } catch (error) {
          console.error(error);
        }
      };
  
      getTxt();
    }, []);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;header className=&quot;App-header&quot;&gt;
          &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
          &lt;p&gt;{txt}&lt;/p&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  
  export defaultApp;
  </code></pre>
  <p>Up to this point the app works fine. The problem is to do the test with jest and react-testing-library. Here the code of the text:</p>
  <pre><code>import { render, screen } from '@testing-library/react';
  import App from './App';
  
  test('renders learn react link', async () =&gt; {
    render(&lt;App /&gt;);
      screen.debug()
    const linkElement = await screen.findByText(&quot;delectus aut autem&quot;);
    expect(linkElement).toBeInTheDocument();
  });
  </code></pre>
  <p>When running this test, an error is raised in the useEffect area specifically when calling window.waitText(). Apparently when executing the jest test it does not execute the script that is in the index.html and therefore the property is never created in the window object, consequently an error arises in the useEffect and the text does not work.</p>
  <p><strong>Removing the script from public/index.html is not a solution.</strong> Well, although it is not a good practice, there are certain cases in which it is necessary to do so.</p>
  <p>The create-react-app documentation says about this:</p>
  <blockquote>
  <p><a href="https://create-react-app.dev/docs/using-the-public-folder/" rel="nofollow noreferrer">Some libraries may be incompatible with webpack and you have no choice but to include it as a tag.</a></p>
  </blockquote>
  <p>Anyway, how to make this component pass the test?</p>