Question

我一直在尝试编写一个测试，以确保单击标记时（从传单中），更多详细信息将显示给用户。 Marker组件是Map组件的子代。首先，我只想查看单击标记时是否一次调用onClick函数。

Map组件返回以下结构

return(
  <LeafletMap>
    <Marker data-testid='marker' onClick={someFunc}/>
    <TileLayer/>
    <Popup/>
  </LeafletMap>
)

在测试中，我尝试渲染Map组件并通过data-testid找到标记：

const handleParcelClick = jest.fn()
it('get parcel details upon clicking the marker', () => {
    const {getByTestId}= render(<Map lat={someNumber} lng={someNumber} zoom={14} parcels={fakeParcels} activeParcel={fakeDetails} onParcelClick={handleParcelClick} />) 
    const marker = getByTestId('marker')
    fireEvent.click(marker)
    expect(handleParcelClick).toBeCalledTimes(1)
});

尝试运行时出现以下错误：

      at getElementError (node_modules/@testing-library/dom/dist/query-helpers.js:22:10)
      at args (node_modules/@testing-library/dom/dist/query-helpers.js:76:13)
      at getByTestId (node_modules/@testing-library/dom/dist/query-helpers.js:59:17)
      at Object.<anonymous>.it (src/ParcelDetails.test.tsx:58:20)

我也尝试使用酶，但没有成功。实际代码中的data-testid对于每个标记都是唯一的，为简单起见，在上面称为marker。我要解决这个错误吗？我应该与Marker组件分开测试Map吗？

更新：我试图使用酶作为溶液；但是，在尝试模拟点击时收到以下错误

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

对于此错误，似乎没有一致的解决方案，而我对为什么得到它感到困惑。我确保marker是我要单击的组件，并且它不为null。

这是我更新的代码：

it('Loads parcel details on click', ()=> {
    const mockClick = jest.fn();
    const component = mount(<Map lat={n1} lng={n2} zoom={14} parcels={fakeParcels} activeParcel={fakeDetails} onParcelClick={mockClick} />);
    const marker = component.find(Marker).first();
    marker.simulate('click');
    expect(mockClick).toBeCalledTimes(1);
});

Answer 1

在玩笑中触发元素上的click事件的最简单方法是先使用dom选择器找到该元素，然后模拟对它的点击，如下所示：

let element = document.getElementById('your-element-id');
element.simulate('click');

希望这会有所帮助！

Answer 2

我能够通过酶获得所需的行为。尽管它不是最佳解决方案-暂时可以。我知道浅层渲染是not the best practice。

以下是使用shallow中的enzyme的解决方案的摘要：

it('Loads parcel details on click', ()=> {
    const onParcelClick = jest.fn();
    const component = shallow(<Map lat={n1} lng={n2} zoom={14} parcels={mockParcels} activeParcel={mockDetails} onParcelClick={onParcelClick} />);
    const marker = component.find(Marker).first();
    marker.simulate('click');
    expect(onParcelClick).toBeCalledTimes(1);
});

在子组件上触发点击事件

2 个答案: