Not docs, but some discussions on this subject:

mapbox/mapbox-gl-js#5026

jsdom/jsdom#1721

Thanks @haysclark , that was helpful.

I have here laid out what I had to do to get a simple Map instantiated for a test: it may save other people time.

I use jest, because it seems to give more useful error messages than mocha. But some of this applies to mocha as well.

Thanks to a pointer by @fc in mapbox/mapbox-gl-js#5026 I can finally use mapbox-gl-js-mock in my tests:
jest.mock("mapbox-gl", () => require("mapbox-gl-js-mock"));

His PR request was merged in the current release of mapbox-gl (0.51.0) for the error:

" SecurityError: localStorage is not available for opaque origins"

But mapbox-gl-js-mock still depends on mapbox-gl 0.44.1 and so we still get the error.
Therefore until this is dealt with you have to hack it by editing:
node_modules/mapbox-gl-js-mock/node_modules/mapbox-gl/src/util/window.js

Go to line 19 where you will see this:

    const { window } = new jsdom.JSDOM('', {     
        // Send jsdom console output to the node console object.
        virtualConsole: new jsdom.VirtualConsole().sendTo(console)
    });

Change it to the following by adding the line url: 'http://localhost':

    const { window } = new jsdom.JSDOM('', {     
        url: 'http://localhost',                 
        // Send jsdom console output to the node console object.
        virtualConsole: new jsdom.VirtualConsole().sendTo(console)
    });

So finally I can instantiate a Map suitable for testing !

import mapboxgl from 'mapbox-gl';
jest.mock("mapbox-gl", () => require("mapbox-gl-js-mock"));

import jsdom from 'jsdom';
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><div id"myMap"></div>`);

let mapDiv = dom.window.document.querySelector("div");
let map = new mapboxgl.Map({container: mapDiv});

However, for those who are starting from scratch and are using ES6, you will also need to sort babel out or you will get your favourite error "unexpected token import", among others.

In package.json in my dependencies I have only "@babel/runtime": "^7.0.0-beta.49"
and here are my devDependencies:

"devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "canvas": "^2.0.1",
    "chai": "^4.2.0",
    "chromedriver": "^2.42.0",
    "elementtree": "^0.1.7",
    "faker": "^4.1.0",
    "gl": "^4.1.1",
    "jest": "^23.6.0",
    "jest-cli": "^23.6.0",
    "jsdom": "^12.2.0",
    "mapbox-gl-js-mock": "^1.0.2",
    "mocha": "^5.2.0",
    "npm-run-all": "^4.1.3",
    "plist": "^2.1.0",
    "regenerator-runtime": "^0.12.1",
    "selenium-webdriver": "^3.6.0",
    "sinon": "^6.3.4",
    "sinon-chai": "^3.2.0"
},

I found I needed all those babel devDependencies including the babel-core with the bridge.
Besides the usual "@babel/preset-env" you also need "@babel/preset-flow" because mapbox-gl includes flow code, which will have to be stripped.

I don't have a .babelrc file, instead I have a babel.config.js file which looks like this:

module.exports = function(api) {
    // The API exposes the following:

    // Cache the returned value forever and don't call this function again.
    api.cache(true);

    // Cached based on the value of some function. If this function returns a value different from
    // a previously-encountered value, the plugins will re-evaluate.
    // var env = api.cache(() => process.env.NODE_ENV);
    //
    // If testing for a specific env, we recommend specifics to avoid instantiating a plugin for
    // any possible NODE_ENV value that might come up during plugin execution.
    // var isProd = api.cache(() => process.env.NODE_ENV === "production");
    //
    // .cache(fn) will perform a linear search though instances to find the matching plugin based
    // based on previous instantiated plugins. If you want to recreate the plugin and discard the
    // previous instance whenever something changes, you may use:
    // var isProd = api.cache.invalidate(() => process.env.NODE_ENV === "production");
    //
    // Note, we also expose the following more-verbose versions of the above examples:
    //api.cache.forever(); // api.cache(true)
    //api.cache.never();   // api.cache(false)
    //api.cache.using(fn); // api.cache(fn)


    //Flow enables type checking, so you need babel plugin strip-types to deal with
    //stuff like "import type {window} from 'whatever'" which appears in a lot of Mapbox code
    return {
        presets: [
            "@babel/preset-env",
            "@babel/preset-flow"
        ],
        plugins: [
            "@babel/plugin-transform-flow-strip-types"
        ]
    };
};

Then you will need a jest.config.js file with at least this content:

const {defaults} = require('jest-config');

module.exports = {
    verbose: true,
    "transformIgnorePatterns": [
        "/node_modules\\/(?!(mapbox-gl))/",
    ],
    "setupFiles": [
	    "./jest.stubs.js",
    ]
};

You need the transformIgnorePatterns key because by default babel will not transpile anything in node_modules, otherwise your test would take a week to run. But we want mapbox-gl code to be transpiled so we tell it not to ignore mapbox-gl.

Incidentally the verbose key doesn't seem to have any effect whatever I do, but that's not so important.

I actually have nothing in my jest.stubs.js file but you may need it one day.

Instructions on how to use? #27

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions