How to simulate click on a react-leaflet Marker in my unit tests?

Question

I have this sample react-leaflet map implementation that renders the map and a marker that can be clicked.

import React from 'react';
import { Map, TileLayer, Marker } from 'react-leaflet';


export default class ScoutPlayers extends React.Component {
  render() {
    const state = {
        lat: 51.505,
        lng: -0.09,
        zoom: 13,
    };

    const position = [state.lat, state.lng]
    return (
      <Map center={position} zoom={state.zoom}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png'
        />
          <Marker position={position} value={{id: 5}} onClick={(event) => {console.log(event.target.options.value)}} />
      </Map>
    )
  }
}

And I got a simple unit test that should test the click calls a function.

import { mount } from 'enzyme';
import { Marker } from 'react-leaflet';
import ScoutPlayers from './ScoutPlayers';

describe('when displaying scout players map', () => {
    let scoutPlayers;
    beforeAll(() => {
        scoutPlayers = mount(<ScoutPlayers/>);
      });

    it('should call the api when player marker clicked', () => {  
        const player = scoutPlayers.find(Marker);
        expect(player).toHaveLength(1);
        player.simulate('click');
    });
})

On simulate('click') is get the following error

TypeError: Cannot read property '__reactInternalInstance$iexoharntw' of null

Any ideas on how I could fix this? I thought mount should properly create the Marker element so that it can be clickable.

I had a similar problem using GoogleMaps and its Marker in that the element could not be clicked because it has some properties initialised as null. I guess my other question would be how to properly test this kind of component as it has some critical business logic?

Answer 1

I have the same problem, although I was able to get the desired behaviour using shallow() instead of mount() . But I am not satisfied with this solution as I have read it is not the best practice .

Anyways here is the code for it:

import { shallow } from 'enzyme';
import { Marker } from 'react-leaflet';
import ScoutPlayers from './ScoutPlayers';

it('does something on marker click', () => {    
    const onMarkerClick = jest.fn();
    const component = shallow(<ScoutPlayers onMarkerClick={onMarkerClick}/>);
    // first() in case there are more than one 
    const marker = component.find(Marker).first();
    marker.simulate('click');
    expect(onMarkerClick).toBeCalledTimes(1);
});

Hope this helps, I know this question is old but thought I'd share as I was referencing it earlier today.

Answer 2

I ended up retrieving the click handler like this:

const component = mount(<MyComponent />);
const marker = component.find(Marker);
const clickHandler = marker.prop('onClick');
clickHandler();
// now assert the things that should be asserted
expect(something).happened();

Although it works, and I'm able to test what I wanted to test, this doesn't "feel" right, but for the moment it's enough for me.

I hope this helps others nonetheless!