Specifying maxBounds causes mocha tests to explode with "Invalid LatLng object: (NaN, NaN)"

Using Leaflet 0.7.7 and jsdom 9.4.2, I’m unable to successfully execute a unit test on L.map.

I’m not using a test runner–just plain ol’ mocha under Node.

$ mocha --require test/support/bugReportSetup.js --compilers js:babel-register --require babel-polyfill test/unit/components/MaxBoundsBugTest.jsx


  MaxBoundsBug
    when maxBounds is provided
      1) mounts without problems


  0 passing (898ms)
  1 failing

  1) MaxBoundsBug when maxBounds is provided mounts without problems:
     Error: Invalid LatLng object: (NaN, NaN)
      at Object.L.LatLng (node_modules/leaflet/dist/leaflet-src.js:1122:9)
      at Object.L.Projection.SphericalMercator.unproject (node_modules/leaflet/dist/leaflet-src.js:1403:10)
      at Object.L.CRS.pointToLatLng (node_modules/leaflet/dist/leaflet-src.js:1439:26)
      at L.Map.L.Class.extend.unproject (node_modules/leaflet/dist/leaflet-src.js:1930:27)
      at L.Map.L.Class.extend._limitCenter (node_modules/leaflet/dist/leaflet-src.js:2279:15)
      at L.Map.include.setView (node_modules/leaflet/dist/leaflet-src.js:8687:17)
      at L.Map.L.Class.extend.initialize (node_modules/leaflet/dist/leaflet-src.js:1545:9)
      at new NewClass (node_modules/leaflet/dist/leaflet-src.js:229:20)
      at Object.L.map (node_modules/leaflet/dist/leaflet-src.js:2318:9)
      at Context.<anonymous> (MaxBoundsBugTest.jsx:13:9)

Here are the gory details…

$ npm show leaflet version
0.7.7

$ npm show jsdom version
9.4.2

// File: MaxBoundsBugTest.jsx

import { expect } from 'chai'

import L from 'leaflet'

describe('MaxBoundsBug', () => {
  context('when maxBounds is provided', () => {
    const maxBounds = [
      [-80, -180], // SW
      [90, 180],   // NE
    ]

    it('mounts without problems', () => {
      L.map('test', {
        center: [30, 0],
        zoom: 13,
        maxBounds: maxBounds
      });
    })
  })
})

// File: bugReportSetup.js

// From https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md

import { jsdom } from 'jsdom'

const EXPOSED_PROPERTIES = ['window', 'navigator', 'document'];

MAIN: {
  global.document = jsdom('<div id="test"></div>')
  global.window = document.defaultView

  Object.keys(document.defaultView).forEach((property) => {
    if ( global[property] === void 0 ) {
      EXPOSED_PROPERTIES.push(property)
      global[property] = document.defaultView[property]
    }
  })
}

[Scarysize]

Pretty stupid solution actually. Just set clientWidth and clientHeight for the container element you are passing to the map to some valid values:

  const container = document.createElement('div');
  container.clientWidth = 800;
  container.clientHeight = 800;

  const map = L.map(container);

  // now returns actual bounds, doesn't throw with jsdom
  map.getBounds()

[ughitsaaron]

I just had a very similar issue myself and wanted to provide some extra info.

I’m also running automated tests with jsdom and Mocha. jsdom provides only the DOM for testing, i.e., it doesn’t actually render the document. Element properties such as clientWidth and clientHeight, therefore, are not provided. Those properties, however, are checked in L.getSize in order to calculate the center of the map’s containing element.

A workaround like the one @Scarysize provided works fine enough, e.g.,

if (!container.clientWidth || !container.clientHeight) {
  // for testing
  container.clientWidth = 1024;
  container.clientHeight = 1024;
}

It might be useful, however, if getSize through an error if clientWidth or clientHeight can’t be checked, or if they gracefully fell back to 0 (which seems reasonable since those properties would presumably only be absent if the document wasn’t actually being rendered in a browser).