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 :)

[mhkeller]

I can't even run plotly in a node script using import Plotly from 'plotly.js-dist-min'; I get the error: ReferenceError: self is not defined

[tmarkson]

I can't even run plotly in a node script using import Plotly from 'plotly.js-dist-min'; I get the error: ReferenceError: self is not defined

I get the same error @mhkeller
Version 2.18.0

[jmiguelv]

Same error as well, following the instructions at https://github.com/plotly/plotly.js#load-as-a-node-module.

[mhkeller]

In case this is useful to folks, I put together this little node library that opens up a window with the plotly chart rendered: https://github.com/mhkeller/plot

Line chart example
Choropleth example

[matthewcornell]

I'm trying to get my QUnit tests running in a Node.js module I've created, but like others above I'm getting ReferenceError: self is not defined. I tried @etpinard 's solution but I couldn't get it to work - it's not getting past import Plotly from 'plotly.js';. (Loaded into Node.js via npm install --save-dev plotly.js.) Any hope of getting around this somehow? Moving to a browser-based testing setup (which QUnit does support) is untenable for us due to our dependency on other Node.js packages (Ajv, in our case). Thank you.

[protobi-pieter]

I;m getting the same error self is not defined when including Plotly via JSDOm.

ReferenceError: self is not defined
 at Object.<anonymous> (/Users/pieter/Exp/protobi-sql/node_modules/plotly.js-dist/plotly.js:16:4)