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

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.

[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 😃

[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