Как смоделировать щелчок на маркере реагирующей листовки в моих юнит-тестах? - PullRequest
Новая
       24

Как смоделировать щелчок на маркере реагирующей листовки в моих юнит-тестах?

1 голос
/ 12 июня 2019

У меня есть пример реализации карты реагирования на листовки, который отображает карту и маркер, по которому можно щелкнуть. 

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>
    )
  }
}

И я получил простой модульный тест, который должен проверить, что щелчок вызывает функцию. 

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');
    });
})

При simulate('click') появляется следующая ошибка

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

Есть идеи, как мне это исправить? Я думал, что mount должен правильно создать элемент Marker, чтобы его можно было нажимать.

У меня была похожая проблема с использованием GoogleMaps и его маркера в том, что элемент нельзя было щелкнуть, поскольку некоторые свойства были инициализированы как нулевые. Думаю, у меня другой вопрос: как правильно протестировать этот тип компонента, поскольку он имеет некоторую критическую бизнес-логику?

...