Any tips on setting up tests with Enzyme + react-force-graph?

[RebootJeff]

I'm adding a new component to my app. The component uses react-force-graph. I test my app using Enzyme + jsdom. But when I try to test my new component, I run into: "screen is not defined" error that causes the tests to crash.

I noticed the error disappears if I comment out import { ForceGraph2D } from 'react-force-graph';.

At first, I simply added globals to my test setup.js file as seen in this example: https://gist.github.com/yan130/386d6c79d975de580c8c343a0423b66d (notice how it adds window.screen and global.screen). But then the error became "self is not defined". I added self to my setup.js, and now the error is "XMLHttpRequest is not defined".

So now I imagine there is something very wrong with my approach. I must be doing something wrong. I can't just keep adding every browser API to my setup.js. And it seems odd that the error occurs when I import the ForceGraph2D component.

Anybody have success using ForceGraph2D in their app and testing it with Enzyme?

[RebootJeff]

Out of curiosity, I tried adding a mock XMLHttpRequest to my jsdom environment for my Enzyme tests. The error then becomes "AFRAME is not defined". So now I'm thinking that react-force-graph's inclusion of 3D and VR variants is possibly making it harder to use (and test) just the 2D variant?

As a work-around, I'm now using:

// Instead of using this...
import { ForceGraph2D } from 'react-force-graph';

// I'm now using this...
import fromKapsule from 'react-kapsule';
import ForceGraph2DKapsule from 'force-graph';
const ForceGraph2D = fromKapsule(
  ForceGraph2DKapsule,
  undefined,
  ['d3Force', 'stopAnimation', 'centerAt', 'zoom']  // bind methods
);
// as seen in: https://github.com/vasturiano/react-force-graph/blob/master/src/ForceGraph2D.js

Now my test suite can run without crashing. Before, the test suite would crash before running any of my tests. I might even be able to simplify my JSDOM setup too.