在子组件上触发点击事件

toobs 发表于 Dev

我一直在尝试编写一个测试，以确保单击标记时（从传单中），更多详细信息将显示给用户。该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);
});

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

这是我使用shallowfrom的解决方案的片段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);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。