Question

我有这个示例样例react-leaflet地图实现，该实现呈现地图和可以单击的标记。

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及其标记存在类似的问题，因为该元素具有一些初始化为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);
});

希望这会有所帮助，我知道这个问题很旧，但我想我会在今天早些时候引用它时与我分享。

Answer 2

我最终像这样检索点击处理程序：

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

尽管它可以工作，并且我能够测试我想测试的东西，但这并不“感觉”正确，但就目前而言，这对我来说已经足够。

我希望这仍然可以帮助其他人！

在单元测试中，如何模拟点击反应传单标记？

2 个答案: