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>