Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

🐛[BUG] Pie chart can't render in react testing environment (JSDOM) (Create-react-app)

See original GitHub issue

OS: Windows NT UI Framework: create-react-app Test framework: Jest with react-testing-library Charts version: @ant-design/charts ^1.1.17

The test error:

  console.error
    Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
        at module.exports (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
        at HTMLCanvasElementImpl.getContext (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:42:5)
        at HTMLCanvasElement.getContext (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\generated\HTMLCanvasElement.js:131:58)
        at Canvas.Object.<anonymous>.Canvas.createDom (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-canvas\src\canvas.ts:72:29)
        at Canvas.Object.<anonymous>.Canvas.initDom (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\abstract\canvas.ts:49:21)
        at Canvas [as constructor] (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\abstract\canvas.ts:18:10)
        at new Canvas (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-canvas\lib\canvas.js:13:42)
        at new Chart (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\chart.ts:60:20)
        at Pie.Object.<anonymous>.Plot.createG2 (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2plot\src\core\plot.ts:95:18)
        at Pie.Plot [as constructor] (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2plot\src\core\plot.ts:84:10) undefined

      at console.error (node_modules/@testing-library/react/dist/act-compat.js:55:34)
      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
      at HTMLCanvasElementImpl.getContext (node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
      at HTMLCanvasElement.getContext (node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:131:58)
      at Canvas.Object.<anonymous>.Canvas.createDom (node_modules/@antv/g-canvas/src/canvas.ts:72:29)

  console.error
    Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
        at module.exports (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
        at HTMLCanvasElementImpl.getContext (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:42:5)
        at HTMLCanvasElement.getContext (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\generated\HTMLCanvasElement.js:131:58)
        at Object.getOffScreenContext (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\util\offscreen.ts:8:27)
        at Object.getTextWidth (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\util\text.ts:38:19)        at default_1 (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\bbox\text.ts:13:17)
        at Text.Object.<anonymous>.ShapeBase.calculateBBox (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-canvas\src\shape\base.ts:44:17)
        at Text.Object.<anonymous>.AbstractShape.getBBox (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\abstract\shape.ts:29:19)
        at Text.Object.<anonymous>.AbstractShape.calculateCanvasBBox (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\abstract\shape.ts:61:23)
        at Text.Object.<anonymous>.AbstractShape.getCanvasBBox (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\abstract\shape.ts:38:25) undefined

      at console.error (node_modules/@testing-library/react/dist/act-compat.js:55:34)
      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
      at HTMLCanvasElementImpl.getContext (node_modules/jsdom/lib/jsdom/living/nodes/HTMLCanvasElement-impl.js:42:5)
      at HTMLCanvasElement.getContext (node_modules/jsdom/lib/jsdom/living/generated/HTMLCanvasElement.js:131:58)
      at Object.getOffScreenContext (node_modules/@antv/g-base/src/util/offscreen.ts:8:27)

  console.error
    Error: Uncaught [TypeError: Cannot read property 'save' of null]
        at reportException (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:341:9)
        at invokeEventListeners (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:3994:16)
        at invokeGuardedCallback (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:4056:31)
        at flushPassiveEffectsImpl (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:23574:9)
        at unstable_runWithPriority (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\scheduler\cjs\scheduler.development.js:468:12) TypeError: Cannot read property 'save' of null
        at Object.getTextWidth (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\util\text.ts:44:11)        at default_1 (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\bbox\text.ts:13:17)
        at Text.Object.<anonymous>.ShapeBase.calculateBBox (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-canvas\src\shape\base.ts:44:17)
        at Text.Object.<anonymous>.AbstractShape.getBBox (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\abstract\shape.ts:29:19)
        at Text.Object.<anonymous>.AbstractShape.calculateCanvasBBox (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\abstract\shape.ts:61:23)
        at Text.Object.<anonymous>.AbstractShape.getCanvasBBox (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-base\src\abstract\shape.ts:38:25)
        at getLabelLength (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\util\label.ts:63:22) 
        at Object.ellipsisLabel (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\util\label.ts:75:23)
        at Category.Object.<anonymous>.Category.drawItem (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\legend\category.ts:424:9)
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\legend\category.ts:284:29
        at Object.each (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\util\src\each.ts:11:13)
        at Category.Object.<anonymous>.Category.drawItems (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\legend\category.ts:283:5)
        at Category.Object.<anonymous>.Category.drawLegendContent (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\legend\category.ts:244:10)
        at Category.Object.<anonymous>.LegendBase.renderInner (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\legend\base.ts:80:10)
        at Category.Object.<anonymous>.GroupComponent.offScreenRender (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\abstract\group-component.ts:241:10)
        at Category.Object.<anonymous>.GroupComponent.init (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\component\src\abstract\group-component.ts:185:10)
        at eachLegend (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\controller\legend.ts:164:48)
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\controller\legend.ts:274:9
        at Object.each (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\util\src\each.ts:11:13)
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\controller\legend.ts:267:7
        at Object.each (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\util\src\each.ts:11:13)
        at Legend.Object.<anonymous>.Legend.loopLegends (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\controller\legend.ts:264:5)
        at Legend.Object.<anonymous>.Legend.update (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\controller\legend.ts:206:12)
        at Legend.Object.<anonymous>.Legend.render (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\controller\legend.ts:62:10)
        at Chart.Object.<anonymous>.View.initComponents (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\view.ts:1853:20)
        at Chart.Object.<anonymous>.View.renderPaddingRecursive (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\view.ts:1352:10)
        at Chart.Object.<anonymous>.View.paint (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\view.ts:1288:10)
        at Chart.Object.<anonymous>.View.render (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2\src\chart\view.ts:233:10)
        at Pie.Object.<anonymous>.Plot.render (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g2plot\src\core\plot.ts:162:16)
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@ant-design\charts\lib\hooks\useChart.js:147:23
        at invokePassiveEffectCreate (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:23487:20)
        at HTMLUnknownElement.callCallback (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:3945:14)
        at HTMLUnknownElement.callTheUserObjectsOperation (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\generated\EventListener.js:26:30)
        at innerInvokeEventListeners (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:338:25)
        at invokeEventListeners (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:3994:16)
        at invokeGuardedCallback (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:4056:31)
        at flushPassiveEffectsImpl (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:23574:9)
        at unstable_runWithPriority (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\scheduler\cjs\scheduler.development.js:468:12)
        at runWithPriority$1 (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:11276:10)
        at flushPassiveEffects (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:23447:14)
        at performSyncWorkOnRoot (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:22269:3)
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:11327:26
        at unstable_runWithPriority (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\scheduler\cjs\scheduler.development.js:468:12)
        at runWithPriority$1 (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:11276:10)
        at flushSyncCallbackQueueImpl (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:11322:9)
        at flushSyncCallbackQueue (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:11309:3)
        at scheduleUpdateOnFiber (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:21893:9)
        at dispatchAction (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-dom\cjs\react-dom.development.js:16139:5)
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\swr\dist\index.js:1:7823
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\swr\dist\index.js:1:9522
        at step (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\swr\dist\index.js:1:4371)
        at Object.next (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\swr\dist\index.js:1:3656)
        at fulfilled (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\swr\dist\index.js:1:3156)

      at console.error (node_modules/@testing-library/react/dist/act-compat.js:55:34)
      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)

  console.error
    The above error occurred in the <ForwardRef> component:
    
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@ant-design\charts\lib\pie\index.js:43:26
        at CustomPie (C:\Users\Administrator\Desktop\DB Project 2021\frontend\src\components\pie-chart\CustomPie.js:5:17)
        at div
        at Row (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\antd\lib\grid\row.js:56:34)
        at div
        at Col (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\antd\lib\grid\col.js:59:33)
        at div
        at Row (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\antd\lib\grid\row.js:56:34)
        at div
        at EventInfo (C:\Users\Administrator\Desktop\DB Project 2021\frontend\src\components\event-info\index.js:26:12)
        at ThemeSwitcherProvider (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\react-css-theme-switcher\src\index.tsx:36:3)
        at ContextProvider (C:\Users\Administrator\Desktop\DB Project 2021\frontend\src\tests\utils.js:10:48)
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at console.error (node_modules/@testing-library/react/dist/act-compat.js:55:34)
      at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
      at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
      at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
      at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)

  console.error
    Error: Uncaught [TypeError: Cannot read property 'clearRect' of null]
        at reportException (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
        at runAnimationFrameCallbacks (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\browser\Window.js:601:13)
        at Timeout.<anonymous> (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\browser\Window.js:577:11)
        at listOnTimeout (internal/timers.js:555:17)
        at processTimers (internal/timers.js:498:7) TypeError: Cannot read property 'clearRect' of null
        at Canvas.Object.<anonymous>.Canvas._drawAll (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-canvas\src\canvas.ts:168:13)
        at C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\@antv\g-canvas\src\canvas.ts:222:16
        at runAnimationFrameCallbacks (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\browser\Window.js:599:13)
        at Timeout.<anonymous> (C:\Users\Administrator\Desktop\DB Project 2021\frontend\node_modules\jsdom\lib\jsdom\browser\Window.js:577:11)
        at listOnTimeout (internal/timers.js:555:17)
        at processTimers (internal/timers.js:498:7)

      at console.error (node_modules/@testing-library/react/dist/act-compat.js:55:34)
      at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at runAnimationFrameCallbacks (node_modules/jsdom/lib/jsdom/browser/Window.js:601:13)
      at Timeout.<anonymous> (node_modules/jsdom/lib/jsdom/browser/Window.js:577:11)

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
adnan-sheikhcommented, Dec 6, 2021

Update react version to 16.8.0+.

i’m on React version: 17.0.2 This problem still persists

2reactions
wedburstcommented, Dec 28, 2021

i have the same problem :S

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Testing Library gives console error for ReactDOM ...
To solve the react testing library error: "ReactDOM.render is no longer supported in React 18, update the version of the react testing ......
Read more >
[Solved]-Pie Chart not rendering React Chart.js-Reactjs
My animation is not working when re rendering my react component? ... Conditional Rendering in React won't work, state not working properly? React...
Read more >
The Biggest Problem With Your React Graph, And How You ...
1. First, you have to import all the required libraries, including FusionCharts, ReactFusionCharts, and charts. · 2. Next, you have to resolve ...
Read more >
Building a Stock Market App using React and Chart.js - Morioh
In this tutorial, you'll learn how to build a Stock Market App using React and Chart.js, requests from IEX API.
Read more >
Learning - DOKUMEN.PUB
fox and as a standalone app for use with Safari, IE, and React Native. ... Node.js is a JavaScript runtime environment used to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Failed to parse source map from '../@antv/layout/src/util/object.ts' file

Next page

🐛[BUG] ReferenceError: self is not defined in Next.js