Vitest Failure

[iM-GeeKy]

Steps to reproduce

Link to example

1. bun install
2. bun run test

Current behavior

 FAIL  src/App.test.tsx [ src/App.test.tsx ]
Error: @pigment-css/react: You were trying to call "generateAtomics" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.
 ❯ Object.generateAtomics node_modules/@mui/material-pigment-css/node_modules/@pigment-css/react/src/generateAtomics.js:34:3
 ❯ Object.<anonymous> node_modules/@mui/material-pigment-css/node_modules/@pigment-css/react/src/Stack.jsx:25:5
 ❯ Object.<anonymous> node_modules/@mui/material-pigment-css/node/Stack/Stack.js:8:37

Expected behavior

Vitest passes.

Context

Using the material-ui-pigment-css-vite-ts example the goal is to successfully run Vitests.

Your environment

npx @mui/envinfo

 Using Chrome Browser

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.9.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.120
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: latest => 11.13.3 
    @emotion/styled: latest => 11.13.0 
    @mui/base:  5.0.0-beta.58 
    @mui/core-downloads-tracker:  6.0.2 
    @mui/icons-material: 6.0.2 => 6.0.2 
    @mui/lab: latest => 6.0.0-beta.9 
    @mui/material: 6.0.2 => 6.0.2 
    @mui/material-pigment-css: 6.0.2 => 6.0.2 
    @mui/private-theming:  6.0.2 
    @mui/styled-engine:  6.0.2 
    @mui/system:  6.0.2 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.2 
    @pigment-css/react:  0.0.22 
    @pigment-css/vite-plugin: 0.0.22 => 0.0.22 
    @types/react: latest => 18.3.5 
    react: latest => 18.3.1 
    react-dom: latest => 18.3.1 
    typescript: latest => 5.6.2 

Search keywords: Vitest

[iM-GeeKy]

@brijeshb42 This is a bit of a continuation of mui/material-ui#43586, but I feel it just warranted it's own issue.

[o-alexandrov]

Duplicate of #8

[iM-GeeKy]

@o-alexandrov Has a workaround been identified for #8 until it gets resolved?

[o-alexandrov]

If you open #8, you’ll see the response from @brijeshb42 who considered it as a non-issue. Hopefully, he has changed his mind since then on this topic

[brijeshb42]

I started looking into this.
First step was to comment out the error throwing line in generateAtomics call inside the node_modules (in my case, the path was - node_modules/@mui/material-pigment-css/node_modules/@pigment-css/react/build/chunk-3XX52SVO.js for version 0.0.23).
After this, I started getting -

src/App.test.tsx:
27 |   return false;
28 | }
29 | function getDocument() {
30 |   /* istanbul ignore if */
31 |   if (typeof window === 'undefined') {
32 |     throw new Error('Could not find default container');
               ^
error: Could not find default container
      at getDocument (/Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/node_modules/@testing-library/dom/dist/helpers.js:32:11)
      at waitFor (/Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/node_modules/@testing-library/dom/dist/wait-for.js:15:28)
      at /Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/node_modules/@testing-library/react/dist/pure.js:88:28
      at asyncWrapper (/Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/node_modules/@testing-library/react/dist/pure.js:84:23)
      at /Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/src/App.test.tsx:19:25
      at /Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/src/App.test.tsx:18:15
      at /Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/node_modules/@testing-library/react/dist/act-compat.js:48:24
      at act (/Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/node_modules/react/cjs/react.development.js:2512:16)
      at /Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/node_modules/@testing-library/react/dist/act-compat.js:47:25
      at /Users/brijesh/projects/mui/experiments/material-ui-pigment-css-vite-ts/src/App.test.tsx:18:11
✗ Basic test > renders error UI [714592560.62ms]
✗ Basic test > renders error UI

 0 pass
 2 fail

Could you try this and resolve the test setup such that atleast one test runs (either with success or failure). After that, I'll take a look.

[iM-GeeKy]

@brijeshb42 I commented out the node module line and started getting

Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I'm not seeing the error you mentioned above...

[iM-GeeKy]

@brijeshb42 Any update on this? This seems to be our last hurdle to migrating my app to pigment and MUI 6.

[iM-GeeKy]

@brijeshb42 I've managed to get the tests passing on the repo. I have to comment out the code you mentioned, but unfortunately can't use patch-package to apply that temporary fix. I'll leave that up to you, but it should be ready to go now!

[iM-GeeKy]

This appears to be fixed with the latest dependencies, so I'm going to close it for the time being.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@iM-GeeKy How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.