Plotly.js: Cannot run jsdom unit tests for files that import Plotly due to missing browser functions

[Camru]

We are using Plotly in our react application and are currently experiencing issues while unit testing components that import the Plotly library either directly, or further down the component tree.

Currently we are using the latest versions of jsdom and mocha to run our unit tests.

It appears the issue is in the Plotly node module, because our unit test suite breaks due to undefined functions in node_modules/plotly.js/dist/plotly.js

For example we get:

ReferenceError: getComputedStyle is not defined

We have attempted to stub that function (as mentioned in the closed issue #1675), but more undefined functions arise and it becomes a bit of a rabbit hole trying to stub all of the missing functions.

[antoinerg]

First of all, thank you @Camru for your interest in Plotly.js!

As of right now, Plotly.js is designed to run in a real browser. For example, some traces type leverage WebGL which isn't supported by jsdom. I think that your best bet would be to run your tests in a real browser with something like mocha-chrome or a similar solution. I hope this helps!

[etpinard]

Yeah, this has come up a lot before.

Getting plotly.js to work in jsdom would be nice, but it's not something plotly.js team member will dedicate time to. That said, we'll potentially accept a community PR that finds a viable solution to this problem.

[etpinard]

@Camru in order to simply _run_ plotly.js in jsdom, looks like you only need to mock two things:

// mock a few things that JSDOM doesn't support out-of-the-box
w.HTMLCanvasElement.prototype.getContext = function() { return null; };
w.URL.createObjectURL = function() { return null; };

See full example -> https://gist.github.com/etpinard/58a9e054b9ca7c0ca4c39976fc8bbf8a

[kngako]

@etpinard your solution works great! Failed to make it export anything other then SVG... But this will do.

[bnbarak]

@etpinard

We use Plotly with its React component .

import Plotly from 'plotly.js/dist/plotly.min.js';
import Plot from 'react-plotly.js';

<Plot {...props} />

So I'm not sure how your solution applies here. If you can please give an example.

Any way, If you'll please give me some guidance on where to start, I can work on that issue. We really need to be able to test our app :)