Map container not found when testing Map parent component

[thomasthiebaud]

Please make sure to check the following boxes before submitting an issue. Thanks!

• Check that all peer dependencies are installed: React, ReactDOM and Leaflet.
• Check that you are using a supported version of React (v0.14 or v15).
• Check that you are using a supported version of Leaflet (v.0.7)

grep -E (react|leaflet) package.json
"leaflet": "0.7.7",
"react": "15.3.2",
"react-dom": "15.3.2",
"react-leaflet": "0.12.3",

• Make sure you have followed the quick start guide for Leaflet.
• Make sure you have fully read the documentation and that you understand the technical considerations.

Expected behavior

Inside a mocha test using enzyme I expect to be able to mount the wrapper a component of my map without having an Map container not found.

Actual behavior

Map container not found.

Steps to reproduce

Given this component

export class Container extends React.Component {
  render () {
    return (
      <div id="map">
        <SimpleExample /> // SimpleExample map from jsfiddle
      </div>
    )
  }
}

I would like to mount the component using enzyme.mount function like this

import React from 'react'
import { mount } from 'enzyme'

describe('(Component) Container', () => {
  let _wrapper

  it('Should render a <Container>', () => {
    _wrapper = mount(<Container />)
    expect(_wrapper.is('div')).to.be.true
  })
})

without having the Map container not found. error.

I already checked this issue #204, but this is not the same because I trying a parent component, not directly the map component.

[evansiroky]

@thomasthiebaud it won't matter where the react-leaflet map component is nested in your structure. The only way to get react-leaflet map components to mount with enzyme is by attaching it to an existing element which has been inserted in the document body in jsdom or some other document-like thing.

@dkreft I did some research and it appears that the core issue is that Leaflet scans the document body to try to find the element to modify, but doesn't find it because of the following: enzyme attempts to mount by calling react-addons-test-utils.renderIntoDocument which creates a blank div, but does not insert it into a document body. Therefore, when you mount with the attachTo method and the thing you're attaching to has been inserted into the document body, then everything contained within that element is now searchable and thus Leaflet can find it.

[PaulLeCam]

This seem to be an issue with mocha/enzyme, same as in #204, as it works as expected in browsers.
If you have a fix for it please open a PR but I won't spend time on this myself.

[thomasthiebaud]

Ok, thank for the answer. I will try to investigate.

[simeonackermann]

Based on #246 (comment) the solution could be to use attach as mount option.
For example the Parent component renders the map, in the test I attach the Parent to an empty div:

import React from 'react';
import {mount} from 'enzyme';

it('test map', () => {
   const div = global.document.createElement('div');
   global.document.body.appendChild(div);
   
   const wrapper = mount(<Parent />, {attachTo: div});
});

[skipjack]

I see the same behavior with jest out of the box. Meaning, when only using react-test-renderer I get the same Map container not found. error:

describe('the `Map` component', () => {
    let component = Renderer.create(<Map />),
        tree = component.toJSON()

    test('renders correctly with nothing passed', () => {
        expect(tree).toMatchSnapshot()
    })
})

I still have to try @simeonackermann's workaround with enzyme but if that's the "recommended" approach, can I submit a PR to document it?

[skipjack]

@simeonackermann your example worked, thanks! @PaulLeCam would you accept a PR to add documentation on this? Any advice on an existing document to edit from here would be appreciated:

https://github.com/PaulLeCam/react-leaflet/tree/master/docs

Otherwise, I can just add a new file called testing.md.

[eric-burel]

For lost googlers: you may encounter similar questions when using Jest+Storyshots. I am looking for fix in this precise scenario.

[eric-burel]

I see the same behavior with jest out of the box. Meaning, when only using react-test-renderer I get the same Map container not found. error:

describe('the `Map` component', () => {
    let component = Renderer.create(<Map />),
        tree = component.toJSON()

    test('renders correctly with nothing passed', () => {
        expect(tree).toMatchSnapshot()
    })
})

I still have to try @simeonackermann's workaround with enzyme but if that's the "recommended" approach, can I submit a PR to document it?

Did you manage to fix this with Snapshots? That explains the issue I experience with Storyshots but I am not sure how far I can customize it, since most of the snapshot operations are automated.

Edit: alternate solution for Storyshots using React Testing Library renderer, works like a charm. Add this mock for SVG rendering and you're good to go: https://stackoverflow.com/questions/54382414/fixing-react-leaflet-testing-error-cannot-read-property-layeradd-of-null/54384719#54384719