Receiving 'event was not wrapped in act' warning after upgrading to React 18

[atshakil]

• @testing-library/react version: 14.0.0
• Testing Framework and version: jest
• DOM Environment:

Relevant code or config:

// CompA.tsx

const CompA = () => null;
export default CompA;

// CompB.tsx

import { lazy } from "react";

const CompB = () => {
  const Example = lazy(() => import("./CompA"));

  return <Example />;
};

export default CompB;

// CompC.tsx

import CompB from './CompB';

const CompC = () => <CompB />;

export default CompC;

// CompC.test.tsx

import { render } from "@testing-library/react";
import CompC from './CompC';

// This test will throw `act()` warning even though CompC is not using `lazy` directly.
describe("CompC", () => {
  test(`Renders`, () => {
    expect(() => {
      render(<CompC />);
    }).not.toThrow();
  });
});

What you did:

Run test using yarn test from a CRA configured project.

What happened:

Receiving warning,

console.error
    Warning: A suspended resource finished loading inside a test, but the event was not wrapped in act(...).
    
    When testing, code that resolves suspended data should be wrapped into act(...):
    
    act(() => {
      /* finish loading suspended data */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act

Reproduction:

Sandbox: https://codesandbox.io/p/sandbox/demo-act-warning-nested-1p4vjn?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A1%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A1%7D%5D&file=%2Fsrc%2FCompC.test.tsx%3A7%2C25

Problem description:

act() warning started to appear after upgrading to React 18.

Wrapping with waitFor approach (as suggested here) has the following drawback.

Considering lazy is used on a shared component, we'll have to update all the tests for all the components that are using the shared component (even though those components are not using lazy directly). For a large codebase, we'll have to update tests for hundreds of components. Even if we have only one shared component using lazy, we'll have to update all the dependent component tests.

Seems like a lot of work!

Could we somehow keep the behavior identical to that on React 16 (act warning is not raised without needing waitFor)? It'll save a lot of developer effort.

Suggested solution:

No warning message

[alone548]

can i work on this.

[alexandrsashin]

@kentcdodds @eps1lon The problem is in new concurrent rendering in React 18, right? Do we plan to fix such issue in the next major version?

[MatanBobi]

@alexandrsashin The current version of RTL already supports React 18. Having said that, we do have some work that @eps1lon has been working on in our alpha version, @atshakil, can you please upgrade to our alpha version to see if this resolves your issue? :)

Thanks.

[atshakil]

@MatanBobi I tested using the PR build from @eps1lon. And, it works without any warning! Great!

"@testing-library/react": "https://pkg.csb.dev/testing-library/react-testing-library/commit/b156f877/@testing-library/react"

Looking forward to a release soon! :)

[alexandrsashin]

@atshakil then you can close such issue.)

[MatanBobi]

Let's keep this one open until alpha will be merged to main :)

[eps1lon]

Yeah this is one of the scenarios we'd like to address with https://github.com/testing-library/react-testing-library/pull/1214 but it needs some additional time.

If you're blocked by this, you can always render().unmount() or cleaup() before you exit your test e.g.

+import {cleanup} from '@testing-library/react';

 expect(() => {
   render(<CompC />);
 }).not.toThrow();
+cleanup()

[TAGC]

I think I've encountered something similar to this. I've been working on upgrading one of our frontend projects to React 18 and I was a bit stumped seeing thousands of warning messages like the following when running the unit tests after upgrading the React and React Testing Library packages:

console.error
    Warning: An update to Temp inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at Temp (/Users/.../src/components/Temp/Temp.tsx:5:23)

       6 |   return (
       7 |     <div>
    >  8 |       <button role="button" onClick={() => setFoo(true)}>
         |                                            ^
       9 |         Example
      10 |       </button>
      11 |     </div>

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5)
      at setFoo (node_modules/react-dom/cjs/react-dom.development.js:17527:7)
      at onClick (src/components/Temp/Temp.tsx:8:44)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:4164:14)

 PASS  src/components/Temp/Temp.spec.tsx
  Temp
    ✓ foo (75 ms)

Our company has a very similar frontend project that made the jump to React 18 several months back and doesn't have this issue, so I was puzzled what the difference was.

I've finally been able to narrow it down to what appears to be a regression between v13.4.0 and v14.0.0 of this package - or more specifically, between v13.5.0-alpha.1 (which is okay) and v14.0.0-alpha.1. With v13.5.0-alpha.1 or earlier, the output when running the same test is simply:

 PASS  src/components/Temp/Temp.spec.tsx
  Temp
    ✓ foo (49 ms)

This was the component I was testing:

import { useState } from 'react'

export function Temp() {
  const [_, setFoo] = useState(false)

  return (
    <div>
      <button role="button" onClick={() => setFoo(true)}>
        Example
      </button>
    </div>
  )
}

This was my test case:

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

import { Temp } from './Temp'

describe('Temp', () => {
  it('foo', async () => {
    render(<Temp />)

    await userEvent.click(screen.getByRole('button', { name: 'Example' }))
  })
})

[alexandrsashin]

@TAGC Yes, versions of libraries are important. When I had problems with act(...) warnings I analyzed schema of RTL dependencies and carefully upgraded all of them. https://twitter.com/AlexandrSashin/status/1670814494119821312/photo/1 It solved my problems.

Your test looks good and you can improve it using userEvent.setup(). As I understood from docs (https://testing-library.com/docs/user-event/setup/) using userEvent.setup() is recommended in v14 and further versions userEvent-library.

[pzaczkiewicz-athenahealth]

While searching for this error, I came across #1051 in my search first.

I created a reproduction repo here: https://github.com/pzaczkiewicz-athenahealth/react-datepicker-user-event-test-failure

However, I wasn't able to use https://pkg.csb.dev/testing-library/react-testing-library/commit/b156f877/@testing-library/react successfully. I had issues installing it with yarn add, and even if I downloaded it locally, I'd get a new "There are no accessible roles" error.

[pzaczkiewicz-athenahealth]

I'm going to log a separate issue, as my issue happens in the middle of await user.type, not upon unmounting.

[michalstrzelecki]

We have stuck on 13.4 because of this issue.

[dougludlow]

@TAGC Yes, versions of libraries are important. When I had problems with act(...) warnings I analyzed schema of RTL dependencies and carefully upgraded all of them. twitter.com/AlexandrSashin/status/1670814494119821312/photo/1 It solved my problems.

Your test looks good and you can improve it using userEvent.setup(). As I understood from docs (testing-library.com/docs/user-event/setup) using userEvent.setup() is recommended in v14 and further versions userEvent-library.

Yup, making sure there was only one version of @testing-library/dom fixed it for me. I forgot to upgrade eslint-plugin-jest-dom.

[btmnk]

@TAGC Yes, versions of libraries are important. When I had problems with act(...) warnings I analyzed schema of RTL dependencies and carefully upgraded all of them. twitter.com/AlexandrSashin/status/1670814494119821312/photo/1 It solved my problems. Your test looks good and you can improve it using userEvent.setup(). As I understood from docs (testing-library.com/docs/user-event/setup) using userEvent.setup() is recommended in v14 and further versions userEvent-library.

Yup, making sure there was only one version of @testing-library/dom fixed it for me. I forgot to upgrade eslint-plugin-jest-dom.

Thank you so much! This solved it for me as well. I didn't realize @testing-library/[email protected] and @testing-library/[email protected] would use different versions of @testing-library/dom so now I just installed it separately and both use the same version now and the warnings are gone..

Should I be using a different user-event version for 14.0.0?

[alexandrsashin]

@btmnk if you use the lastest version of RTL I recommend using the latest version of @testing-library/user-event.

[btmnk]

@btmnk if you use the lastest version of RTL I recommend using the latest version of @testing-library/user-event.

But the latest version of @testing-library/user-event has a different version of @testing-library/dom than the latest version of @testing-library/react.. So my assumption was that it's intended to use a specific version of user-event to go with @testing-library/react so the dependencies are also in sync.

I'm used to such library versions all being kept in sync but I guess that's not the case here.. (e.g. for every version of @testing-library/react there is also the same version of @testing-library/user-event so the compatibility is clear)

// EDIT:

Hmm I checked the repositories just now and user-event only uses the dom library as a peerDependency. So I assume the problem was the time when I installed each of the two packages. When I first installed @testing-library/react it probably installed a different version of dom than @testing-library/user-event did (since I installed that quite a while later). Not sure exactly how lockfiles behave in that case but I think they locked a different sub dependency of @testing-library/dom.

So nvm then, it was just an issue on my side. When installing both at the same time they should both use the same version of dom.

[alexandrsashin]

Nowadays I think the best solution for any project - upgrade all @testing-library packages + eslint plugins, read migration guides (if it is needed) and check that only one common @testing-library/dom version in package-lock.json or in yarn.lock.

[wuarmin]

Hey, I have this deps installed:

  "devDependencies": {
    "@testing-library/react": "^14.1.2",
    "@testing-library/jest-dom": "^6.2.0",
    "@testing-library/user-event": "^14.5.2",
    "cross-fetch": "^4.0.0",
    "eslint": "^8.56.0",
    "eslint-config-react-app": "^7.0.1",
    "jsdom": "^23.2.0",
    "msw": "^2.0.13",
    "vite-plugin-eslint": "^1.8.1",
    "vitest": "^1.1.3"
  }

I'm using react v18 and here's a test:

it("should create a MOTO paymentxxx", async () => {
  const {
    user,
    getByPlaceholderText,
    getByRole,
  } = setup();

  // search for a customer
  const lastNameInput = getByPlaceholderText("Last Name");
  const firstNameInput = getByPlaceholderText("First Name");

  await user.type(lastNameInput, "Miles"); // this produces the warning
});

function setup() {
  const user = userEvent.setup();
  const utils = render(
      <CreatePayment />
  );
  return {
    ...utils,
    user,
  };
}

As soon as I call user.type, I get as many warnings as the input has letters. In this case "Miles", so 5 identical warnings:

Warning: An update to CustomerSearch inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
  /* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
    at CustomerSearch (/home/node/repo/apps/payments/src/features/customer-search/customer-search.component.jsx:16:29)
    at div
    at CreatePayment (/home/node/repo/apps/payments/src/features/create-payment/create-payment.component.jsx:18:43)
    at QueryClientProvider (file:///home/node/repo/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:41:3)
    at Wrapper (/home/node/repo/apps/payments/src/features/create-payment/tests/create-payments-basic.test.jsx:1190:20)

Please could someone help me how to solve this? The amount of warnings is really annoying.

Thanks!

[alexandrsashin]

@wuarmin I can advice to do such steps:

1. Check @testing-library/dom version (use npm ls @testing-library/dom or yarn why @testing-library/dom). You need to have only one version of the library.
2. Use expect(await screen.findBy...).toEqual(...) to check the end of the component setup() (if you send requests before the component mounting).

[wuarmin]

@alexandrsashin Thank you!!

  /@testing-library/[email protected]:
    resolution: {integrity: sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==}
    engines: {node: '>=14'}
    dependencies:
      '@babel/code-frame': 7.23.5
      '@babel/runtime': 7.23.6
      '@types/aria-query': 5.0.4
      aria-query: 5.1.3
      chalk: 4.1.2
      dom-accessibility-api: 0.5.16
      lz-string: 1.5.0
      pretty-format: 27.5.1
    dev: true

  /@testing-library/[email protected]:
    resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
    engines: {node: '>=14'}
    dependencies:
      '@babel/code-frame': 7.23.5
      '@babel/runtime': 7.23.8
      '@types/aria-query': 5.0.4
      aria-query: 5.1.3
      chalk: 4.1.2
      dom-accessibility-api: 0.5.16
      lz-string: 1.5.0
      pretty-format: 27.5.1
    dev: true

I really don't know what the reason was, but somehow I had 2 versions of @testing-library/dom (9.3.3 and 9.3.4) in my workspace. @testing-library/dom is a peer dep of @testing-library/user-event and @testing-library/user-event was just installed at the root of my workspace.

I solved the problem as follows:

1. Add "@testing-library/dom": "^9.3.4" to the app level (package.json)
2. run pnpm install --filter app-name
3. Run the tests -> the issue was solved!!!
4. Remove the "@testing-library/dom": "^9.3.4" from the app level (package.json)
5. run pnpm install --filter app-name
6. Run the tests again -> The problem was still solved!!!

I don't understand how the problem was solved. Do you know? I haven't actually changed anything technically, just added the packaged and removed it after that.

The only file that was changed after this procedure was pnpm.lock.yaml. There was now only one entry with version 9.3.4.

Thanks

[oncet]

Was having the same error. It turns out it was cuased by @storybook/test installing a different, more newer, version of RTL. Uninstalled since we are not doing testing with Storybook and the error went away.

[supuwoerc]

Any progress on this issue?

[rriski]

For people struggling with "was not wrapped in act(...)" with fake timers I managed to fix the (thousands of issues) warnings by changing:

userEvent.setup({ advanceTimers: jest.advanceTimersByTime })
⬇️
userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync })

We have fake timers enabled globally with (see https://jestjs.io/docs/configuration#faketimers-object):

fakeTimers: {
    enableGlobally: true,
    advanceTimers: true,
}

jest.advanceTimersByTimeAsync was added in jest v29.5.0.

I haven't seen this approach mentioned in any of the issues referencing the act warning errors. Perhaps https://testing-library.com/docs/using-fake-timers/ should be updated to mention this?

Found this blog post helpful in explaining jest.advanceTimersByTimeAsync https://gamliela.com/blog/advanced-testing-with-jest.