CanvasRenderingContext2D is not defined when testing in mocha / jsdom
See original GitHub issue[BUG] When running tests in node (mocha + jsdom), CanvasRenderingContext2D is not globally defined (see tmpvar/jsdom#1672). This causes problems in acquireContext:
if (item instanceof HTMLCanvasElement) {
// To prevent canvas fingerprinting, some add-ons undefine the getContext
// method, for example: https://github.com/kkapsner/CanvasBlocker
// https://github.com/chartjs/Chart.js/issues/2807
var context = item.getContext && item.getContext('2d');
if (context instanceof CanvasRenderingContext2D) {
initCanvas(item, config);
return context;
}
}
Expected Behavior
test should run in node.js as they would in the browser
Current Behavior
exception thrown
Possible Solution
Not really sure how to solve this. On the one hand, it doesn’t seem like this code achieves much that’s useful, given that in the cases where canvas.getContext() === undefined, no exceptions are raised (so I’m guessing that there will just be no graphs). On the other hand, this might be more jsdom’s problem than chart.js’s.
Context
- unit tests are good, they should be runnable in node.js
Environment
- Chart.js version: 2.4
- Browser name and version: node.js 6.x
Issue Analytics
- State:
- Created 7 years ago
- Comments:11 (3 by maintainers)
Top Results From Across the Web
CanvasRenderingContext2D is not defined when testing in ...
[BUG] When running tests in node (mocha + jsdom), CanvasRenderingContext2D is not globally defined (see tmpvar/jsdom#1672).
Read more >jsdom - Option is not defined when running my mocha test
I encountered the same issue. I noticed that Option constructor is available from window if you assign window directly from jsdom.
Read more >How to test HTML5 canvas with jest? - Yonatan Kra
Jest is using JSDom, which doesn't implement EVERYTHING available in the browser. ... How to solve ReferenceError: Path2D is not defined.
Read more >Project Testing - MIT
In your Mocha test code, import createCanvas(..) from the canvas package and use it to create Canvas instances. Then you can subsequently examine...
Read more >How to Write JavaScript Unit Tests with Mocha, JSDOM, and ...
JavaScript Unit Test Overview. JavaScript unit tests use the following libraries by default: mocha - Test framework. Docs. chai - Assertion library.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

I’m using following to render the chart in tests (mocha):
setup/config.js
Ignore babel require if you do not need it.
The test script in package.json is:
You would need canvas dependency
I think #5214 is potentially related