Unit tests fail when adding MantineProvider

[rambaghdadi95]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.12.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

None

Describe the bug

I'm trying to run some unit tests using Vitest. I've followed the docs, and I've looked at the template, however I keep getting this error:
Error: createRoot(...): Target container is not a DOM element.

This happens whenever I try to add to my custom render function.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

You can find a fully working example in this repository – https://github.com/mantinedev/vite-template
To learn how to setup Mantine with Vitest, follow this guide – https://mantine.dev/guides/vitest/

[leadq]

Short Answer: I was facing the exact same issue. Then, I found the issue in my case. Be careful about your components which are using browser's utilities. Because there is not any browser utility while unit testing with vite or jest.

Long answer: I followed all of the guides but I had this issue too. Even, I created fresh project with vite template provided in the docs, but still got same issue. Then I realized..

Error: createRoot(...): Target container is not a DOM element.
 ❯ createRoot node_modules/react-dom/cjs/react-dom.development.js:29384:11
 ❯ Object.createRoot$1 [as createRoot] node_modules/react-dom/cjs/react-dom.development.js:29855:10
 ❯ Object.exports.createRoot node_modules/react-dom/client.js:12:16
     10|     i.usingClientEntryPoint = true;
     11|     try {
     12|       return m.createRoot(c, o);
       |                ^
     13|     } finally {
     14|       i.usingClientEntryPoint = false;
 ❯ src/main.tsx:15:10
 ❯ src/components/StickerPopup/useOpenStickerSet.ts:3:31  <<<<< here####

in my case, the error line showed useOpenStickerSet.ts was the issue and it was right. I was writing integration tests for whole page which includes many components under the hood. And one of them is using this hook. The hook is using some other functions or sub-hooks which are using some browser utilities like localStorage or resize. After I mocked this "useOpenStickerSet" hook, my problem's solved.

[alexfrize]

Thanks. That actually helped. I had another issue with the same error and also did not realize where this issue came from. Your answer helped and it took a couple of minutes for this issue to be resolved. Thank you!