V15 causes tests to throw `act` warnings

[ronny-lark]

In our app we use Mantine which has a LOT of transitions. We suppress all transitions by setting their duration to 0 in tests, so that we don't have to await findBy in every single test.

I tried upgrading Vite and Vitest in our project to 5.2 and 1.5 respectively, and at the same time, upgrade testing-library/react from 14 to 15, as well as some other supporting libraries.

This immediately caused nearly every single test (out of 1500) to start throwing act warnings. Sometimes multiple per test. I then started doing a 50/50 to figure out which library upgrade caused this; i.e. upgrading some without the others. Turns out it was @testing-library/react moving to 15 that caused this issue.

Downgrading to 14, while keeping Vite 5.2 and Vitest 1.5 solved the issue, and now all the tests pass without throwing an act warning.

My question is what could have possibly been changed in V15? I looked at the release notes and there was no mention of anything in particular. Here's my package.json:

  "dependencies": {
    "@aiola/frontend": "4.2.7",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/modifiers": "^7.0.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@flow/flow-backend-types": "2.0.1",
    "@jargonic/containers-types": "2.0.3",
    "@jargonic/containerType-types": "2.0.3",
    "@jargonic/customer-types": "2.0.7",
    "@jargonic/event-definition-types": "2.0.6",
    "@jargonic/files-types": "2.0.3",
    "@jargonic/flow-metadata-types": "2.0.3",
    "@jargonic/flows-types": "2.0.3",
    "@jargonic/folder-types": "2.0.3",
    "@jargonic/jargon-types": "2.0.3",
    "@jargonic/labeling-types": "2.0.4",
    "@mantine/core": "7.8.0",
    "@mantine/dates": "7.8.0",
    "@mantine/dropzone": "7.8.0",
    "@mantine/form": "7.8.0",
    "@mantine/hooks": "7.8.0",
    "@mantine/modals": "7.8.0",
    "@mantine/notifications": "7.8.0",
    "@tabler/icons-react": "^3.2.0",
    "classnames": "^2.3.2",
    "dayjs": "^1.11.10",
    "i18next": "^23.4.6",
    "immer": "^10.0.2",
    "mantine-react-table": "2.0.0-beta.1",
    "nanoid": "3.3.6",
    "papaparse": "^5.4.1",
    "qs": "^6.11.2",
    "react": "^18.2.0",
    "react-confetti-explosion": "^2.1.2",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.3.1",
    "react-infinite-viewer": "^0.28.1",
    "react-moveable": "^0.55.0",
    "react-router-dom": "^6.21.3",
    "react-selecto": "^1.26.3",
    "use-immer": "^0.9.0",
    "zustand": "^4.4.3"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^1.3.3",
    "@storybook/addon-essentials": "^8.0.9",
    "@storybook/addon-interactions": "^8.0.9",
    "@storybook/addon-actions": "^8.0.9",
    "@storybook/addon-links": "^8.0.9",
    "@storybook/blocks": "^8.0.9",
    "@storybook/react": "^8.0.9",
    "@storybook/react-vite": "^8.0.9",
    "@storybook/test": "^8.0.9",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/papaparse": "^5.3.14",
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^7.3.1",
    "@typescript-eslint/parser": "^7.3.1",
    "@vitejs/plugin-react": "^4.2.1",
    "@vitest/coverage-istanbul": "1.5.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "eslint-plugin-storybook": "^0.8.0",
    "jsdom": "^24.0.0",
    "postcss": "^8.4.24",
    "postcss-preset-mantine": "^1.7.0",
    "postcss-simple-vars": "^7.0.1",
    "prettier": "^3.0.1",
    "prop-types": "^15.8.1",
    "storybook": "^8.0.9",
    "storybook-addon-remix-react-router": "^3.0.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.2.2",
    "vite": "^5.2.10",
    "vite-tsconfig-paths": "^4.3.2",
    "vitest": "1.5.0",
    "vitest-canvas-mock": "^0.3.3"
  }

[MatanBobi]

This is usually happening due to multiple instances of @testing-library/dom which is a peer dependency of user-event and a dependency for RTL. Try resolving to one version using npm overrides or yarn resolutions. We're currently working on moving DTL to a peer dependency in RTL too.

[brandanking-decently]

@MatanBobi I am also getting this issue too, can you explain how to resolve this. Maybe a code snippet would be great. Thanks

[abelozerov]

Having the same issue with tests with react 18.3.0. Tried to put "@testing-library/dom": "10.0.0" to overrides section of package.json, no luck

Error: Expected test not to call console.error().

If the error is expected, test for it explicitly by mocking it out using jest.spyOn(console, 'error').mockImplementation() and test that the warning occurs.

Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead of `react-dom/test-utils`. See https://react.dev/warnings/react-dom-test-utils for more info.

[MatanBobi]

@belozerov The warning you see here is related to a bug in React's release where they didn't export act but only unstable_act as can be seen here: https://github.com/testing-library/react-testing-library/issues/1314.

@brandanking-decently - To verify that it's indeed that problem, you'll need to see if you have multiple version of @testing-library/dom installed. If you do, you'll need to use yarn resolutions of npm overrides to set it to the same version (10), this is defined in your package.json file.

[MatanBobi]

I'm resolving this as a new version of RTL was released where DTL is a peer dependency so it should resolve it. If you're still experiencing this, please re-open or comment here.