reactjs - 如何在我的单元测试中模拟点击 react-leaflet 标记？

Question

我有这个示例 react-leaflet map 实现，它呈现 map 和可以点击的标记。

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:无法读取 null 的属性“__reactInternalInstance$iexoharntw”

关于如何解决这个问题的任何想法？我认为 mount 应该正确地创建 Marker 元素，以便它可以被点击。

我在使用 GoogleMaps 及其 Marker 时遇到了类似的问题，因为无法单击该元素，因为它的某些属性已初始化为 null。我想我的另一个问题是如何正确测试这种组件，因为它有一些关键的业务逻辑？

Answer 1

我有同样的问题，尽管我能够使用 shallow() 而不是 mount() 获得所需的行为。但是我对这个解决方案不满意，因为我已经阅读了 it is not the best practice .

无论如何，这是它的代码:

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

希望这会有所帮助，我知道这个问题很老，但我想分享一下，因为我今天早些时候提到了它。