Leaflet: TypeError: Cannot read property '_layerAdd' of null

[LeCaoDat]

I using
leaflet v1.3.3
jest v 22.4.3

My code

import L from 'leaflet'

describe('TEST', () => {
  it('Circle', () => {
    const mapElement = document.createElement('div')
    mapElement.setAttribute('id', 'map')
    document.body.appendChild(mapElement)
    let map = L.map('map', {
    }).setView([1,  1], 14)
    L.circle([1,  1]).addTo(map)
    expect(123).toBe(123)
  })
})

Run yarn test

The results here:

TypeError: Cannot read property '_layerAdd' of null

       8 |     let map = L.map('map', {
       9 |     }).setView([1,  1], 14)
    > 10 |     L.circle([1,  1]).addTo(map)
      11 |     expect(123).toBe(123)
      12 |   })
      13 | })

      at NewClass.addLayer (node_modules/leaflet/src/layer/Layer.js:158:14)
      at NewClass.getRenderer (node_modules/leaflet/src/layer/vector/Renderer.getRenderer.js:21:9)
      at NewClass.beforeAdd (node_modules/leaflet/src/layer/vector/Path.js:80:24)
      at NewClass.addLayer (node_modules/leaflet/src/layer/Layer.js:169:10)
      at NewClass.addTo (node_modules/leaflet/src/layer/Layer.js:52:7)
      at Object.addTo (spec/javascript/abc.spec.js:10:38)

When I use L.circle or L.polyline it will get this error.

[IvanSanchez]

What's the environment? Is there a (headless) web browser, or nodejs with domjs?

[LeCaoDat]

I write that test in project VueJs + leaflet + jest. Any tips for me?

[IvanSanchez]

It's possible that you need to wait for Vue to mount containers and such things.

[IvanSanchez]

Hi, and thanks for taking the time to open a bug report in Leaflet.

However, in this repository we only handle bugs in "vanilla" Leaflet. This means that we do not handle bugs which are specific to frameworks such as:

• React
• Ractive
• AngularJS
• Bootstrap
• Leaflet for R
• Joomla
• Wordpress
• Ionic
• Cordova
• Vue
• Electron
• Polymer
• TypeScript
• ...etc

Please understand that we only have the time and energy to test Leaflet in plain web browsers.

Please try to either reproduce the bug without using any frameworks, or submit a bug to the appropiate repo.

[mkondur]

@LeCaoDat, I had the same problem, angular 6 + leaflet 1.3 + jest
I solved this issue by setting map options preferCanvas: true
and in jestGlobalMocks config define canvas getContext to fix Error: Not implemented: HTMLCanvasElement.prototype.getContex from jsdom module

Object.defineProperty(HTMLCanvasElement.prototype, 'getContext', {
  value: () => {
    return {
      fillRect: function() {},
      clearRect: function(){},
      putImageData: function() {},
      createImageData: function(){ return []},
      setTransform: function(){},
      drawImage: function(){},
      save: function(){},
      fillText: function(){},
      restore: function(){},
      beginPath: function(){},
      moveTo: function(){},
      lineTo: function(){},
      closePath: function(){},
      stroke: function(){},
      translate: function(){},
      scale: function(){},
      rotate: function(){},
      arc: function(){},
      fill: function(){},
      transform: function(){},
      rect: function(){},
      clip: function(){},
    }
  } 
});

[xiel]

What I can recommend for testing is the following, just mock leaflet using this in your test file, that is rendering the map component:
jest.mock('leaflet')

And then you place this leaflet mock you can find in react-leaflet into the jest mocks folder (__mocks__/leaflet.js, download current file from: https://github.com/PaulLeCam/react-leaflet/blob/master/__mocks__/leaflet.js)

That should be enough in most cases.

[kentr]

Adding this in case it helps someone.

If you don't want to mock Leaflet for whatever reason and want to continue using the SVG renderer, another fix for this error is to add a stub function for createSVGRect in the test environment, as suggested by Vadim Gremyachev.