title: How to isolate tests in React Testing Library?
body: <p>My tests are affecting each other. I'm using the default create-react-app setup with Typescript. All tests run fine individually but when I run all tests the last one fails (both in IntelliJ and <code>npm test</code>). The assertion that fails finds a value that was caused by the previous test.
  <a href="https://i.stack.imgur.com/3rL7y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3rL7y.png" alt="failing test"></a></p>
  
  <p>Now I have read articles such as <a href="https://kentcdodds.com/blog/test-isolation-with-react" rel="noreferrer">Test Isolation with React</a> but I am not sharing any values between my tests. I also read about <a href="https://testing-library.com/docs/react-testing-library/api#cleanup" rel="noreferrer">the cleanUp function</a> and tried adding beforeEach(cleanup) and beforeAll(cleanUp), but I didn't found a working solution yet besides putting each test in a separate file. I feel the solution should be pretty simple.</p>
  
  <p>I've quickly generated a create-react-app with TypeScript to reproduce the issue in a small as possible project: <a href="https://github.com/Leejjon/breakingtests" rel="noreferrer">https://github.com/Leejjon/breakingtests</a></p>
  
  <p>My App.tsx</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import {BrowserRouter, Link, Route} from 'react-router-dom';
  
  const About: React.FC = () =&gt; {
      return (
          &lt;div&gt;
              &lt;h1 id="pageHeader"&gt;About page&lt;/h1&gt;
              &lt;p&gt;This is the about page&lt;/p&gt;
          &lt;/div&gt;
      );
  };
  
  const Home: React.FC = () =&gt; {
      return (
          &lt;div&gt;
              &lt;h1 id="pageHeader"&gt;Home page&lt;/h1&gt;
              &lt;p&gt;This is the home page&lt;/p&gt;
          &lt;/div&gt;
      );
  };
  
  const News: React.FC = () =&gt; {
      return (
          &lt;div&gt;
              &lt;h1 id="pageHeader"&gt;News page&lt;/h1&gt;
              &lt;p&gt;This is the news page&lt;/p&gt;
          &lt;/div&gt;
      );
  };
  
  const App: React.FC = () =&gt; {
      return (
          &lt;div className="App"&gt;
              &lt;BrowserRouter&gt;
                  &lt;Link id="linkToHome" to="/"&gt;Home&lt;/Link&gt;&lt;br/&gt;
                  &lt;Link id="linkToNews" to="/news"&gt;News&lt;/Link&gt;&lt;br/&gt;
                  &lt;Link id="linkToAbout" to="/about"&gt;About&lt;/Link&gt;
  
                  &lt;Route exact path="/" component={Home}/&gt;
                  &lt;Route exact path="/news" component={News}/&gt;
                  &lt;Route exact path="/about" component={About}/&gt;
              &lt;/BrowserRouter&gt;
          &lt;/div&gt;
      );
  };
  
  
  export default App;
  </code></pre>
  
  <p>My App.test.tsx:</p>
  
  <pre><code>import React from 'react';
  import {render, fireEvent, waitForElement} from '@testing-library/react';
  import App from './App';
  
  describe('Test routing', () =&gt; {
      test('Verify home page content', () =&gt; {
          const {container} = render(&lt;App/&gt;);
          const pageHeaderContent = container.querySelector("#pageHeader")
              ?.firstChild
              ?.textContent;
          expect(pageHeaderContent).toMatch('Home page');
      });
  
      test('Navigate to news', async () =&gt; {
          const {container} = render(&lt;App/&gt;);
  
          const pageHeaderContent = container.querySelector("#pageHeader")
              ?.firstChild
              ?.textContent;
          expect(pageHeaderContent).toMatch('Home page');
  
          const linkToNewsElement: Element = (container.querySelector('#linkToNews') as Element);
          fireEvent.click(linkToNewsElement);
          const pageHeaderContentAfterClick = await waitForElement(() =&gt; container.querySelector('#pageHeader')?.firstChild?.textContent);
          expect(pageHeaderContentAfterClick).toMatch('News page');
      });
  
      test('Navigate to about', async () =&gt; {
          const {container} = render(&lt;App/&gt;);
  
          const pageHeaderContent = container.querySelector("#pageHeader")
              ?.firstChild
              ?.textContent;
          expect(pageHeaderContent).toMatch('Home page');
  
          const linkToAboutElement: Element = (container.querySelector('#linkToAbout') as Element);
          fireEvent.click(linkToAboutElement);
          const pageHeaderContentAfterClick = await waitForElement(() =&gt; container.querySelector('#pageHeader')?.firstChild?.textContent);
          expect(pageHeaderContentAfterClick).toMatch('About page');
      });
  });
  </code></pre>