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...