title: Why getting error when running 2 test in testing-library/react, NextJS?
body: <pre><code>import { fireEvent, render, screen } from &quot;@testing-library/react&quot;;
  import ArticleListComponent from &quot;../src/ui/components/pages/ArticleList&quot;;
  
  test(&quot;render headline&quot;, async () =&gt; {
    render(&lt;ArticleListComponent /&gt;);
  
    expect(screen.getByTestId(&quot;article-heading&quot;)).toHaveTextContent(
      &quot;Content Articles&quot;
    );
  });
  
  test(&quot;check add new button click&quot;, async () =&gt; {
    render(&lt;ArticleListComponent /&gt;);
    const button = screen.getByRole(&quot;button&quot;, { name: /Add New/i });
    fireEvent.click(button);
  
    expect(screen.getByText(&quot;News&quot;)).toBeInTheDocument();
  });
  </code></pre>
  <p>I am getting this error when I run this code that has 2 tests.</p>
  <p><strong>Error Message</strong>
  <code>A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.</code></p>
  <p>I can run the test independently, like if I comment out the second test, then it runs perfectly. Same result if I comment out the first test.</p>
  <p>If I use <code>npm run test --detectOpenHandles</code> then I don't get any error, but the terminal hangs and after around 2 minutes, it shows this error</p>
  <pre><code>&lt;--- Last few GCs ---&gt;
  
  [48861:0x102d52000]   111487 ms: Mark-sweep 2035.9 (2060.8) -&gt; 2032.0 (2076.8) MB, 1827.8 / 4.8 ms  (average mu = 0.087, current mu = 0.023) allocation failure scavenge might not succeed
  </code></pre>
  <p>I tried putting test inside <strong>describe</strong>, still same issue</p>
  <p><strong>Update</strong>
  I had some issues in my Component's useEffect where I was not handling the API call properly</p>