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.

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:closed
  • Created 7 years ago
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
gor181commented, Dec 12, 2016

I’m using following to render the chart in tests (mocha):

setup/config.js

require('babel-register')();

const canvas = require('canvas');

const jsdom = require('jsdom');
const document = jsdom.jsdom();
const window = document.defaultView;

const canvasMethods = ['HTMLCanvasElement'];

Object.keys(window).forEach(property => {
  if (typeof global[property] === 'undefined') {
    global[property] = window[property];
  }
});

canvasMethods.forEach(method =>
  global[method] = window[method]
);

global['CanvasRenderingContext2D'] = canvas.Context2d;

global.navigator = {
 userAgent: 'node.js'
};

Ignore babel require if you do not need it.

The test script in package.json is:

"test": "mocha test/config/setup.js test/__tests__/**/*"

You would need canvas dependency

0reactions
jacktuckcommented, Jan 31, 2018

I think #5214 is potentially related

Read more comments on GitHub >

github_iconTop 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 >

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