gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 20:00:51 25 4
gpt4 key购买 nike

我有这个示例 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。我想我的另一个问题是如何正确测试这种组件,因为它有一些关键的业务逻辑?

最佳答案

我有同样的问题,尽管我能够使用 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);
});

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

关于reactjs - 如何在我的单元测试中模拟点击 react-leaflet 标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56552649/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com