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='&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= 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?
Aucun commentaire:
Enregistrer un commentaire