[jest] No known conditions for "./auto" entry in "chart.js" package

Expected behavior

All the unit tests using chart.js must run without any error.

Current behavior

With the new version(v4.0.1) of chart.js update the unit tests are failing.

I am currently using yarn 2 as package manager.

please find the below error:

FAIL src/components/apps/analytics/SampleChart.test.js

● Test suite failed to run

No known conditions for "./auto" entry in "chart.js" package



  1 | import React from 'react';

> 2 | import Chart from 'chart.js/auto'; // eslint-disable-line no-unused-vars

    | ^

  3 | import { Bar } from 'react-chartjs-2';

  4 |

  5 | const chartData = {



  at bail (.yarn/cache/resolve.exports-npm-1.1.0-81756e03ba-52865af8ed.zip/node_modules/resolve.exports/dist/index.js:32:8)

  at resolve (.yarn/cache/resolve.exports-npm-1.1.0-81756e03ba-52865af8ed.zip/node_modules/resolve.exports/dist/index.js:89:32)

  at Object.<anonymous> (src/components/apps/analytics/SampleChart.js:2:1)

  at Object.<anonymous> (src/components/apps/analytics/SampleChart.test.js:3:1)

Test Suites: 1 failed, 1 total

Tests: 0 total

Snapshots: 0 total

Time: 6.932 s

steps to reproduce:

Samplechart,js

import React from ‘react’;

import Chart from ‘chart.js/auto’; // eslint-disable-line no-unused-vars

import { Bar } from ‘react-chartjs-2’;

const chartData = {

labels: [‘05-Sep-21’, ‘12-Sep-21’, ‘19-Sep-21’, ‘26-Sep-21’, ‘03-Oct-21’, ‘10-Oct-21’],

datasets: [

{

  barPercentage: 1,

  label: 'Top 10 Avg [ALL]',

  backgroundColor: ['#9AC355'],

  data: [1, 2, 3, 4, 5, 0],

},

],

};

const SampleChart = () => {

return (

<Bar

  data={chartData}

  //   id={`container-${sectionTitle.split(' ').join('-')}-${type}`}

  options={{

    plugins: {

      legend: {

        labels: { font: { weight: 'bold' }, usePointStyle: true },

        position: 'right',

      },

    },

    scales: {

      y: {

        beginAtZero: true,

        title: { display: true, text: 'Domain Names' },

      },

    },

  }}

/>

);

};

export default SampleChart;

Samplechart.test.js

import React from ‘react’;

import { customRender, screen, waitFor } from ‘…/…/…/util/test-utils’;

import SampleChart from ‘./SampleChart’;

describe(‘Sample test for chart js’, () => {

it('renders without error', () => {

    customRender(<SampleChart />);

  });

});

I tried to mock the chart .js by default import . I am facing the same error.

● Test suite failed to run

No known conditions for "." entry in "chart.js" package



  28 |   }),

  29 | }));

> 30 | jest.mock('chart.js', () => ({

     |      ^

  31 |   default: jest.fn(() => {}),

  32 | }));

  33 |



  at bail (.yarn/cache/resolve.exports-npm-1.1.0-81756e03ba-52865af8ed.zip/node_modules/resolve.exports/dist/index.js:32:8)

  at resolve (.yarn/cache/resolve.exports-npm-1.1.0-81756e03ba-52865af8ed.zip/node_modules/resolve.exports/dist/index.js:89:32)

  at Object.mock (src/components/apps/analytics/AnalyticsApp.test.js:30:6)

Test Suites: 1 failed, 1 total

Tests: 0 total

Snapshots: 0 total

Time: 3.288 s

Request to please solve the issue.

Reproducible sample

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.0.1

Browser name and version

No response

Link to your project

No response

[dangreen]

@xr0master Hi.

This is a browser library, it does not have the concept of ESM. Any code in the browser is ESM from es6.

Chart.js is an NPM package - the browser also does not have the concept for packages, so usually, developers use bundlers, and bundlers have a module resolution system, which generally repeats the Node.js module resolution system. So in the context NPM package, when we say “ESM”, we mean Node.js’s ECMAScript Modules.

You are also available to use Chart.js in the browser directly without bundling it:

• using UMD bundle
• using services like Skypack

[xr0master]

@dangreen it’s very nice that you repeat my words but recommend me to read something 😃 But this is actually very cool, maybe it can be very useful to someone. I am not kidding.

Webpack doesn’t care about the “type” field either. Most likely it was a plugin issue.

I agree with you about the SSR 👍