Mapbox-gl-js: Jest, Enzyme, Have a site using mapbox-gl-js that is failing in test coverage, pointing to mapbox-gl as culprit.

[sgoldens]

mapbox-gl-js version:

Steps to Trigger Behavior

1.
2.
3.

Expected Behavior

Actual Behavior

[sgoldens]

https://github.com/mapbox/mapbox-gl-js-mock, from <-- Here is what answers I have found which are intriguing but so far unhelpful...

I'm trying to improve test coverage of a portfolio site I'm working on developing. There appears to be an issue related to mapbox-gl in my jest test coverage reports, which incorporates enzyme. I'm trying to test-cover my portfolio, which includes a tiny prototype map quiz game, available here: http://sashagoldenson.com/#geo-quiz and the help I've found so far was obtuse, and I'm asking for clarity, if possible. I'll do whatever heavy lifting I can. Thank you in advance for your time.

Best,

-Sasha

All code for this project is available here: https://github.com/sgoldens/home/tree/master/src/components/GeoQuiz

Here's the specific test I'm trying to run which produces the error, which is a react-routes Routes test: https://github.com/sgoldens/home/blob/master/src/__tests__/Routes.test.js

Here's the jest error report which I believe points to mapbox-gl being the culprit I must deal with to continue the good work of test coverage:

FAIL src/__tests__/Routes.test.js
● Test suite failed to run

TypeError: window.URL.createObjectURL is not a function

  at Object.195.../../source/worker (node_modules/mapbox-gl/dist/mapbox-gl.js:397:100)
  at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
  at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
  at Object.218.../ (node_modules/mapbox-gl/dist/mapbox-gl.js:443:28)
  at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
  at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
  at Object.204../worker_pool (node_modules/mapbox-gl/dist/mapbox-gl.js:415:29)
  at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
  at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
  at Object.148.../render/line_atlas (node_modules/mapbox-gl/dist/mapbox-gl.js:303:785)
  at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
  at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
  at Object.189.../geo/lng_lat (node_modules/mapbox-gl/dist/mapbox-gl.js:385:242)
  at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
  at node_modules/mapbox-gl/dist/mapbox-gl.js:1:762
  at Object.64.../package.json (node_modules/mapbox-gl/dist/mapbox-gl.js:134:219)
  at s (node_modules/mapbox-gl/dist/mapbox-gl.js:1:711)
  at e (node_modules/mapbox-gl/dist/mapbox-gl.js:1:882)
  at node_modules/mapbox-gl/dist/mapbox-gl.js:1:900
  at Object.<anonymous>.a (node_modules/mapbox-gl/dist/mapbox-gl.js:1:177)
  at Object.<anonymous> (node_modules/mapbox-gl/dist/mapbox-gl.js:1:413)
  at Object.<anonymous> (node_modules/react-mapbox-gl/lib/map.js:21:16)
  at Object.<anonymous> (node_modules/react-mapbox-gl/lib/index.js:4:13)
  at Object.<anonymous> (src/components/GeoQuiz/components/Map.js:2:48)
  at Object.<anonymous> (src/components/GeoQuiz/GeoQuizApp.js:3:38)
  at Object.<anonymous> (src/Routes.js:21:1112)
  at Object.<anonymous> (src/__tests__/Routes.test.js:3:15)
  at handle (node_modules/worker-farm/lib/child/index.js:44:8)
  at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:51:3)
  at emitTwo (events.js:106:13)
  at process.emit (events.js:191:7)
  at process.nextTick (internal/child_process.js:758:12)
  at _combinedTickCallback (internal/process/next_tick.js:73:7)
  at process._tickCallback (internal/process/next_tick.js:104:9)

[mollymerp]

@sgoldens thanks for using Mapbox. Unfortunately, we cannot provide support on this issue tracker; it is only for bugs and feature requests.

Mapbox GL JS requires a browser to run. It appears you're trying to use the /dist files in a node testing environment, which is not supported. I suggest you try asking on StackOverflow or the react-mapbox-gl issue tracker.

[mhinc14]

@sgoldens Did you manage to find a solution to this in the end. If yes, please are you able to share your solution in order to help anyone stuck with the same issue. :) thanks

[kuanb]

@mhinc14 Looks like, in tests, one should use something like mapbox-gl-js-mock (https://github.com/mapbox/mapbox-gl-js-mock/) in lieu of mapbox-gl.

But, as is illustrated by some PRs with author's who are confused (ex: https://github.com/mapbox/mapbox-gl-js-mock/issues/27); implementation is not as straightforward as it perhaps could be.

[rlueder]

For others landing here looking for a solution on how to mock mapbox-gl the solution can be found in Jest documentation: Mocking Node Modules

[fc]

With jest, mock it like this:

jest.mock("mapbox-gl", () => require("mapbox-gl-js-mock"));

I was running into a bug with using the mapbox-gl-js-mock (the error " SecurityError: localStorage is not available for opaque origins"), and it's because it was instantiating jsdom without a URL (need to add {url: 'http://localhost'}). Have a PR out there to fix it #7455 ... but yay tests.