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

Using the DoughnutChart example

doughnutChart.js

import React from 'react'
import { Doughnut } from 'react-chartjs-2'

const data = {
  labels: [
    'Red',
    'Green',
    'Yellow',
  ],
  datasets: [{
    data: [
      300,
      50,
      100,
    ],
    backgroundColor: [
      '#FF6384',
      '#36A2EB',
      '#FFCE56',
    ],
    hoverBackgroundColor: [
      '#FF6384',
      '#36A2EB',
      '#FFCE56',
    ],
  }],
}

const DoughnutChart = props => (
  <div className="chart-wrapper">
    <Doughnut
      data={data}
    />
  </div>
)

export default DoughnutChart

doughnutChart.spec.js

import React from 'react'

import DoughnutChart from './doughnutChart'

it('Renders a DoughnutChart', () => {
  const wrapper = mount(
    <DoughnutChart />,
  )
  expect(wrapper).toMatchSnapshot()
})

Error

Failed to create chart: can't acquire context from the given item
      
      at CustomConsole.Object.<anonymous>.console.error (tools/jestSetup.js:37:9)
      at Chart.construct (node_modules/chart.js/src/core/core.controller.js:116:13)
      at new Chart (node_modules/chart.js/src/core/core.js:7:8)
      at ChartComponent.renderChart (node_modules/react-chartjs-2/lib/index.js:259:29)
      at ChartComponent.componentDidMount (node_modules/react-chartjs-2/lib/index.js:81:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:263:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:143:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:319:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
      at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:91:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:200:24)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (src/elements/doughnutChart/doughnutChart.spec.js:6:17)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>

[csi-lk]

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

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

[Parziphal]

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.