0

我目前有一个使用外部库中的组件的组件：

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组件上执行此操作？我在使用插件中的外部组件的多个组件中遇到了这个问题。当涉及到对我的组件进行单元测试时，这可能不是最佳实践，因此任何建议都非常受欢迎。

4

0 回答 0