[charts][ESM] `@mui/x-charts` does not work with jest about mui-x HOT 9 OPEN

I'm adding test on the charts We have similar (not exactly the same) issue to add test on our side on charts. I assume solving #11551 would help

from mui-x.

I had the same issue and adding this mock:

jest.mock("@mui/x-charts", () => ({ 
  BarChart: jest.fn().mockImplementation(({ children }) => children)
}));

to the tests solved it
(from https://stackoverflow.com/questions/77202795/mui-x-charts-error-syntaxerror-unexpected-token-export)

from mui-x.

@alexfauquette I did assign this to you to keep track of it. Could you comment here when the addition of tests provides a solution for this? Thanks! 🙇🏼

from mui-x.

My way to fix the issue

1. Editing node_modules/@mui/x-charts/package.json with following changes (plus patch)
   "exports": {
   ".": {
   "require": "./index.js",
   "types": "./index.d.ts",
   "import": "./esm/index.js",
   "default": "./esm/index.js"
   },
   "./": {
   "require": "./",
   "types": ".//index.d.ts",
   "import": "./esm//index.js",
   "default": "./esm/*/index.js"
   }
   },
2. in jest.config.js
   moduleNameMapper: {
   '^d3-shape$': '/node_modules/d3-shape/dist/d3-shape.min.js',
   '^d3-path$': '/node_modules/d3-path/dist/d3-path.min.js',
   '^d3-scale$': '/node_modules/d3-scale/dist/d3-scale.min.js',
   '^d3-array$': '/node_modules/d3-array/dist/d3-array.min.js',
   '^d3-interpolate$': '/node_modules/d3-interpolate/dist/d3-interpolate.min.js',
   '^d3-color$': '/node_modules/d3-color/dist/d3-color.min.js',
   '^d3-format$': '/node_modules/d3-format/dist/d3-format.min.js',
   '^d3-time$': '/node_modules/d3-time/dist/d3-time.min.js',
   '^d3-time-format$': '/node_modules/d3-time-format/dist/d3-time-format.min.js',
   },
3. mock window.matchMedia.addEventListener.

from mui-x.

@alexfauquette it seems d3-scale uses modules in its build files. Any idea how we can support that?

https://github.com/d3/d3-scale/blob/d6904a4bde09e16005e0ad8ca3e25b10ce54fa0d/package.json#L21

from mui-x.

Seems similar to #9826 (comment)

I also found other issues on this topic, but did not manage to fix the reproduction example with them

• d3/d3-interpolate#96
• jestjs/jest#12036

from mui-x.

Hi @Notalifeform could you try using this fix: d3/d3-interpolate#96 (comment) please?

from mui-x.

Hi @Notalifeform could you try using this fix: d3/d3-interpolate#96 (comment) please?

Hi @michelengelen ,

Thanks for getting back to me.

I did try to transpile the module as in this brach, but it did not help:

https://github.com/rocsys/mui-x-charts-jest-issue-minimal-reproduction/pull/1/files

moving the config to package.json did not help either:

https://github.com/rocsys/mui-x-charts-jest-issue-minimal-reproduction/pull/2/files

from mui-x.

Hey @Notalifeform ... Thanks for testing that. It's a shame it wasn't that easy of a fix.
I am pretty sure @alexfauquette mentioned that he is working on a more profound fix. Right Alex?

from mui-x.