react-chartjs-2: Testing with jest / enzyme / jsdom - Failed to create chart: can't acquire context from the given item

Workaround is to mock out the chart for enzyme mounting (or just use a shallow wrapper)

    jest.mock('react-chartjs-2', () => ({
      Doughnut: () => null,
    }))

In my case the solution provided by csi-lk wasn’t working because I was calling jest.mock() inside describe() and even inside it(), but it must be outermost scope. Perhaps that’s obvious but it wasn’t for me.

I had the same issue with @sgavathe After looking at their test-setup – https://github.com/reactchartjs/react-chartjs-2/blob/master/test/setup.js

I just had to add the code below to eliminate the console errors while also rendering canvas in my jest tests

import 'jest-canvas-mock';

class ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

window.ResizeObserver = ResizeObserver;

The issue with this mock is

jest.mock('react-chartjs-2', () => ({
  Bar: () => null, // add any additional chart types here
  Line: () => null
}));

you can’t then test against canvas, it won’t render canvas inside your screen container! This test will fail!

 const canvas = screen.getByTestId('testdiv').querySelector('canvas') ;
 expect(canvas).toBeInTheDocument();

@schlattk do you have the setup-jest.js file setup properly in your package.json similar to this.

  "jest": {
    "setupFiles": [
      "./shim.js",
      "./setup-jest.js"
    ]

I was trying to configure this in CRA generated app but it didn’t allow me. I searched and found that you can directly add following piece of code in ‘src/setupTests.js’ file. No need to do any additional jest configs.

import React, { Component } from 'react';

jest.mock('react-chartjs-2', () => ({
  Bar: () => null, // add any additional chart types here
  Line: () => null
}));

How can I test a component that use the library?!

@schlattk this is my setup-jest.js

import React, { Component } from 'react';

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16.3'; // change depending on what version of react

Enzyme.configure({ adapter: new Adapter() });

import $ from 'jquery';
global.$ = global.jQuery = $;

jest.mock('react-chartjs-2', () => ({
  Bar: () => null, // add any additional chart types here
  Line: () => null
}));

What type of charts are you attempting to use? Make sure you add it inside of the mock where my comment is at.

I have a BarChart component as follows:

  const BarChart = ({ data, options }: BarProps) => {
  const chartRef = useRef<ChartJS<"bar"> | null>(null);

  return (
    <Bar
      options={options}
      data={data}
      ref={chartRef}
      onClick={(event) => {
        const { current: chart } = chartRef;

        if (!chart) return;

        const dataset = getDatasetAtEvent(chart, event);
        const element = getElementAtEvent(chart, event);
        const elements = getElementsAtEvent(chart, event);

        // eslint-disable-next-line no-console
        console.info(dataset, element, elements);
      }}
    />
  );
};

I am trying to write unit tests for it however I keep getting the following error message when running the test

Failed to create chart: can’t acquire context from the given item

I can’t use the suggestion of

jest.mock('react-chartjs-2', () => ({ Bar: () => null }));

because it doesn’t render the canvas element

If you’re attaching a reference element to the chartjs component the above will not work directly as it’s a functional component, you’ll need to return a fake component forwarding the ref

If you’re using in your component like so:

   const barRef = useRef(null);
    <Bar ref={barRef} ... />

Then you’ll need to adjust the mock:

jest.mock('react-chartjs-2', () => {
  const { forwardRef } = require('react');
  const Line = forwardRef((props, ref)=> <div ref={ref} {...props}></div>);
  const Bar = forwardRef((props, ref)=> <div ref={ref} {...props}></div>);
  return {
    Line,
    Bar,
  };
});

Anyone has a solution for this issue without using:

jest.mock('react-chartjs-2', () => ({
  Doughnut: () => null,
}));

Because by doing that we can’t test against the canvas as @sgavathe mentioned.

Why is this issue CLOSED?

They are tacitly indicating that we should use vitest XD.

I had the same issue with @sgavathe After looking at their test-setup – https://github.com/reactchartjs/react-chartjs-2/blob/master/test/setup.js

I just had to add the code below to eliminate the console errors while also rendering canvas in my jest tests

import 'jest-canvas-mock';

class ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

window.ResizeObserver = ResizeObserver;

This solved our issue with testing react-chartjs-2. We are using vitest. So we needed the vitest version.

yarn add --dev vitest-canvas-mock

And appended in our setup.js file

Now our test is successful.

Hi! I am facing the same issue. I am currently using the latest versions of react-chartjs-2 and chartjs. I tried the fix suggested by @joe-choi-dev and the one suggested by @lissettdm but didn’t work for me. Do you guys have a fix for this issue? Thanks!

It is also not working for me.

Hi, yes but apparently setup files are not supported in create react app - according to the error message in terminal, it works fine in any case though!

@csi-lk’s solution worked for me, be sure to put it in your setup-jest.js file.