title: Why does my react tests fail in CI-pipeline due to "not wrapped in act()", while working fine locally?
body: <p>I have a test-suite containing 37 tests that are testing one of my views. Locally, all tests pass without any issues, but when I push my code, the test-suite fails in our pipeline (we are using GitLab).</p>
  <p>The error-output from the logs in CI are extremely long (thousands of lines, it even exceeds the limit set by GitLab). The error consists of many &quot;not wrapped in act()&quot;-, and &quot;nested calls to act() are not supported&quot;-warnings (Moslty triggered by <code>useTranslation()</code> from I18Next and componens like <code>Tooltip</code> from Material-UI).</p>
  <p>My guess is that async-data from the API (mocked using msw) triggers a state-update after a call to <code>act()</code> has completed, but I'm not sure how to prove this, or even figure out what tests are actually failing.</p>
  <p>Has anyone experienced something similar, or knows what's up?</p>
  <p>Example of a failing test:</p>
  <pre><code>it.each([
      [Status.DRAFT, [PAGE_1, PAGE_11, PAGE_2, PAGE_22, PAGE_3]],
      [Status.PUBLISHED, [PAGE_1, PAGE_12, PAGE_2, PAGE_21, PAGE_22, PAGE_221]],
    ])('should be possible to filter nodes by status %s', async (status, expectedVisiblePages) =&gt; {
      renderComponent();
      await waitFor(() =&gt; {
        expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
      });
      userEvent.click(screen.getByLabelText('components.FilterMenu.MenuLabel'));
      const overlay = await screen.findByRole('presentation');
      await waitFor(() =&gt; expect(within(overlay).queryByRole('progressbar')).not.toBeInTheDocument());
      userEvent.click(within(overlay).getByText(`SiteStatus.${status}`));
      userEvent.keyboard('{Esc}');
      
      const items = await screen.findAllByRole('link');
      expect(items).toHaveLength(expectedVisiblePages.length);
      expectedVisiblePages.forEach((page) =&gt; expect(screen.getByText(page.title)).toBeInTheDocument());
    });
  </code></pre>
  <h2>Update 1</h2>
  <p>Okay. So I've narrowed it down to this line:</p>
  <pre><code>    const items = await screen.findAllByRole('link');
  </code></pre>
  <p>There seems to be a lot of stuff happening while waiting for things to appear. I believed that the call to <code>findAllByRole</code> was already wrapped in <code>act()</code> and that this would make sure all updates has been applied.</p>
  <h2>Update 2</h2>
  <p>It seems to be a problem partly caused by tests timing out.
  I believe multiple calls to <code>waitFor(...)</code> and <code>find[All]By(...)</code> in the same test, in addition to a slow runner, collectively exceeds the timout for the test (5000ms by default). I've tried to adjust this limit by running the tests with <code>--testTimeout 60000</code>. And now, some of the tests are passing. I'm still struggling with the &quot;act()&quot;-warnings. Theese might be caused by a different problem entirely...</p>
  <p>The bughunt continues...</p>