Блог

В настоящее время у меня есть компонент, который использует компонент из внешней библиотеки:

 import DropDownButton from '../atoms/DropDownButton';
import ModalSelector from 'react-native-modal-selector';

const ClubPicker = props => {
  const {club, onChangeHandler} = props;

  const handleSelection = selectedClub => {
    onChangeHandler(selectedClub);
  };

  return (
    <>
      <ModalSelector
        data={CLUBS}
        initValue={club}
        onChange={option => {
          handleSelection(option.label);
        }}
      >
        <DropDownButton text={club} />
      </ModalSelector>
    </>
  );
};
 

Я пишу некоторые модульные тесты для этого компонента, используя библиотеку тестирования React. Мой вопрос в том, что в моем ModalSelector компоненте есть опора onChange, которую я хочу выполнить, чтобы убедиться, что моя onChangeHandler опора уволена? В настоящее время это то, что у меня есть для теста, в котором я создал макет функции:

 import React from 'react';
import ClubPicker from '../src/components/molecules/ClubPicker';
import {render} from '@testing-library/react-native';

const onChangeHandlerMock = jest.fn();

describe('Check if the ClubPicker renders and the OnChange event works', () => {

  it('It fires the mock function on change.', () => {
    let component = render(
      <ClubPicker club="Test" onChangeHandler={onChangeHandlerMock} />
    );
  });
});

 

Я знаю, что могу использовать эту fireEvent функцию, но как я сделаю это на внешнем ModelSelector компоненте? У меня есть эта проблема в нескольких компонентах, где я использую внешние компоненты из плагинов. Возможно, это не лучшая практика, когда дело доходит до модульного тестирования моих компонентов, поэтому любые советы более чем приветствуются.