[Bug]: CJS support for Jest

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Jest tests that render a tree containing a chart appear to fail after v5.x.x.

Cannot find module 'react-chartjs-2' from 'src/components/LineChart/index.tsx'

I tested this using Create React App with the default Jest configuration. I think this is caused by the removal of the CJS build. I don’t think Jest supports ESM-only modules out of the box. From what I can see, I don’t think people who use CRA can use the new version of this library without ejecting and configuring Jest themselves.

Please can you let me know if this is an expected consequence or if I’m missing something?

Thanks 🙂

Reproduction

https://github.com/louis-young/chartjs-cjs-jest-issue

chart.js version

v5.0.1

react-chartjs-2 version

v.4.0.0

Possible solution

No response

[leonardobrito]

My workaround was create a datum file on mocks folder and do a mapper for this file on jest config:

moduleNameMapper: {
  'react-chartjs-2': '<rootDir>/src/tests/mocks/datum/react-chartjs-2.js',
},

At the file (<rootDir>/src/tests/mocks/datum/react-chartjs-2.js) we need to export the used components when needed:

function Doughnut({ children, ...rest }) {
  return <div {...rest}>{children}</div>
}

function Line({ children, ...rest }) {
  return <div {...rest}>{children}</div>
}

export {
  Doughnut,
  Line,
}

[dangreen]

@LouisYoungGMSL

not build for CJS too

Chart.js is ESM only. We can’t import ESM in CommonJS module. So react-chartjs-2 can’t have CommonJS bundle.

I don’t think people who use CRA can use the new version of this library without ejecting and configuring Jest themselves.

Yes. CRA at all is poorly supported and has rare updates.

If you will eject react-scripts you should follow this doc to enable ESM support in jest. Or, I can recommend you migrate to vitest. Vitest has ESM support out of the box and has almost the same API as jest. My example of migration: https://github.com/reactchartjs/react-chartjs-2/commit/7f3ec96101d21e43cae8cbfe5e09a46a17cff1ef