Запуск события click для дочернего компонента - PullRequest
Новая
       6

Запуск события click для дочернего компонента

0 голосов
/ 20 февраля 2020

Я пытался написать тест, который будет гарантировать, что при щелчке маркера (из листовки) пользователю будет отображаться дополнительная информация. Компонент 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 - это тот компонент, на который я хочу щелкнуть, и что он не нулевой.

Вот мой обновленный код: 

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

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Мне удалось получить желаемое поведение с помощью фермента. Хотя это не лучшее решение - оно пока подойдет. Я знаю, что поверхностный рендеринг не лучшая практика .

Вот фрагмент моего решения с использованием 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);
});
0 голосов
/ 20 февраля 2020

Самый простой способ вызвать событие click для элемента jest - сначала найти элемент с помощью селектора dom, а затем смоделировать щелчок по нему, например: 

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

Надеюсь, это поможет !!

...