Is wrapping with act now required?

[MattyBalaam]

I have updated to React 18 and now to see a lot of act warnings and have needed to manually wrap userEvent calls. This is also the first time we have updated to userEvent 14, so perhaps we are doing something wrong? I have tried using the convenience API and also a 'session'

I have created a simple test case with attached screenshot and code - test 1 has no warnings, but tests 2 and 3 do:

import { useState } from 'react';
import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

const TestComponent = () => {
  const [checked, setChecked] = useState(false);

  return (
    <label>
      input
      <input
        type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
    </label>
  );
};

describe('<Checkbox>', () => {
  it('test with act', async () => {
    render(<TestComponent />);

    expect(screen.queryByLabelText('input')).not.toBeChecked();

    await act(
      async () => await userEvent.click(screen.getByLabelText('input')),
    );

    expect(screen.queryByLabelText('input')).toBeChecked();
  });

  it('test without act', async () => {
    render(<TestComponent />);

    expect(screen.queryByLabelText('input')).not.toBeChecked();

    await userEvent.click(screen.getByLabelText('input'));

    expect(screen.queryByLabelText('input')).toBeChecked();
  });

  it('test with session without act ', async () => {
    const user = userEvent.setup();
    render(<TestComponent />);

    expect(screen.queryByLabelText('input')).not.toBeChecked();

    await user.click(screen.getByLabelText('input'));

    expect(screen.queryByLabelText('input')).toBeChecked();
  });
});

• @testing-library/jest-dom: 5.16.3
• @testing-library/react: 13.0.0
• @testing-library/user-event: 14.0.4

[MattyBalaam]

Some further explorations:

• If I use a synchronous fireEvent I get no act warning.
• I still get an act warning even If I try using a findBy after the click event
• I don’t get an act warning if I don’t await and then waitFor

  it('fire event - no act warning', async () => {
    render(<TestComponent />);

    expect(screen.queryByLabelText('input')).not.toBeChecked();

    fireEvent.click(screen.getByLabelText('input'));

    expect(screen.queryByLabelText('input')).toBeChecked();
  });

  it('test without act and later findBY - act warning', async () => {
    render(<TestComponent />);

    expect(screen.queryByLabelText('input')).not.toBeChecked();

    await userEvent.click(screen.getByLabelText('input'));

    expect(await screen.findByLabelText('input')).toBeChecked();
  });
  
  it('do not await click - no act warning', async () => {
    const user = userEvent.setup();
    render(<TestComponent />);

    expect(screen.queryByLabelText('input')).not.toBeChecked();

    user.click(screen.getByLabelText('input'));

    await waitFor(() => {
      expect(screen.getByLabelText('input')).toBeChecked();
    });
  });

[ph-fritsche]

No, wrapping with act is neither required nor recommended.

@testing-library/react manipulates the configuration of the underlying @testing-library/dom when you import it.
@testing-library/user-event uses that configuration.

If await user.anyAPI() yields an act warning and user.anyAPI(); await waitFor() does not, they might not use the same configuration i.e. not the same copy of @testing-library/dom.

If you use one of the framework wrappers, it is important that @testing-library/dom is resolved to the same installation required by the framework wrapper of your choice.
Usually this means that if you use one of the framework wrappers, you should not add @testing-library/dom to your project dependencies.

[KNHui]

Hi @ph-fritsche, I have a question about the act. In my test, wrapping with act() makes the test pass, but removing it makes the test fail intermittently. This seems to contradict the statement that "wrapping with act is neither required nor recommended."

import { PropsWithChildren } from 'react';
import { render, screen, within, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AscendingIcon } from '@/constants/icon';

const queryClient = new QueryClient();
const wrapper = ({ children }: PropsWithChildren) => (
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
);

describe('Header sorting functionality in ScreeningDashboardTable', () => {
  it('should sort Location in ascending order after clicking', async () => {
    const user = userEvent.setup();
    render(<SortTable />, { wrapper });

    const columnHeader = screen.getByRole('columnheader', { name: /Location sort/i });
    const sortIcon = within(columnHeader).getByAltText('sort');
    await act(() => user.click(sortIcon)); // test passes
    // await user.click(sortIcon); // test fails

    expect(sortIcon.getAttribute('src')).toBe(AscendingIcon);
  });
});

My environment:

Package	Version
React	^18.3.1
@testing-library/react	^16.0.1
@testing-library/user-event	^14.5.2
@testing-library/jest-dom	^6.6.3
jest	^29.7.0

What could be causing this behavior? Am I missing something in my setup?

[MattyBalaam]

Thanks, since my last comment I have started with a fresh install which does not exhibit this act warning. I have a feeling we have some kind of package mismatch somewhere - we have a quite large Monorepo.

[MattyBalaam]

What fixed it for us in our monorepo was to set the resolution in our root package.json:

"resolutions": {
  "@testing-library/dom": "8.13.0"
},

[gdostie]

Fixed it for us too, thanks! In our case with pnpm in the root package.json:

"pnpm": {
  "overrides": {
    "@testing-library/dom": "8.18.1"
  }
}

[hyalen]

I was struggling a lot with these flaky act() warnings. Putting in the resolutions worked for our team, thank you!

[srosato]

Big struggle here too when transforming a test that was already async from userEvent.click(...) to

const user = userEvent.setup()

await user.click(...)

I was getting an act warning and I was sure I was properly waiting for elements to update so that my code does not trigger state updates outside the test.

This comment helped me. I did a pnpm why @testing-library/dom

I then added to my package.json:

  "pnpm": {
    "overrides": {
      "@testing-library/dom": "8.20.1"
    }
  },

pnpm why @testing-library/dom now outputs:

And that got rid of my act warning when trying to use await user.click(...)

[gdostie]

Without any pnpm overrides, I've had some luck using pnpm dedupe command as well. However the issue sometimes come back. When it does I just rerun a dedupe again.

[dfernandez79]

I had the same issue, and I found that the root cause is having multiple versions of @testing-library/dom.

Do a npm ls @testing-library/dom or the equivalent in pnpm to check for multiple versions. The override solves the problem, but it may be masking other issues caused by having multiple versions.

User event registers an internal wrapper named asyncWrapper by mutating the global config in @testing-library/dom. But, when you have different versions it doesn't get the act wrapper registered by @testing-library/react 😞
It took me a lot of debugging to figure that out... and I solved the problem by making sure that both modules load the same dependency. In retrospective, I wonder if it was possible to provide the same functionality/easy-of-use without relying in a global side-effect like the config object.

[vonny29]

I had the same problem, and I found upgrading to @testing-library/react@14.0.0 resolved the issue.

[EduVencovsky]

The fix for my case was described in the answer (which was taken from the docs)

Usually this means that if you use one of the framework wrappers, you should not add @testing-library/dom to your project dependencies.

So I just removed @testing-library/dom from the dependencies and it fixed the warnings.