Убедитесь, что опора дочернего компонента является определенной функцией в ферменте

Question

, когда я продолжаю ссылаться на свой дочерний компонент в своих тестах и ​​хочу проверить, является ли одна из подпорок, входящих в дочерний компонент, определенной функцией, мне постоянно говорят, что дочерний компонент не определен в Jest, несмотря на то, что он импортируется и не является неопределенным при визуализации компонента. Код для компонента выглядит следующим образом:

class ActivityItemsDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = { id: '' };
  }
  ...(various methods here)...
  render() {
  const {
    // these props are being dispatched from a redux state
    selectedOption,
    selectNewOption,
    onFilterChange,
    loanDates,
    loans,
    intl,
    } = this.props;
  return (
    <div className="dls-accent-gray-03-bg flex flex-align-center">
      <div className="col-md-3 margin-l margin-t pad-0">
        <Dropdown
          id="statements-dropdown"
          options={getOptions(loanDates, loans, intl)}
          value={selectedOption}
          onChange={index => onStatementChange(index,
          loanDates,
          loans,
          selectNewOption,
          onFilterChange)}
          label={intl.formatMessage({ id: 'loanActivityAndHistory.statementDropdown.view' })}
          getOptionLabel={({selectedLabel: label}) => {
          const lines = label.split('-');
          return { firstLine: lines[0], secondLine: lines[1] };
        }}
      />
    </div>
    {selectedOption === CUSTOM
      ? <ActivityItemsDatePicker applyCustomDates={onFilterChange} />
      : ''}
    </div>
    );
   }
  }

Непокрытые строки, для которых Jest нужны тесты, - это две строки в prop getOptionLabel в дочернем компоненте Dropdown. Компонент Dropdown импортируется из API, к которому у меня нет доступа, поэтому я не вижу, что происходит под капотом с компонентом Dropdown.

В моем файле Jest (также с использованием Enzyme) тесты выглядят следующим образом:

const testRecentActivityWhenCurrentStatementPresent = async () => {
  const wrapper = await shallow(<ActivityItemsDropdown
    selectedOption="1"
    selectNewOption={selectNewOption}
    onFilterChange={onFilterChange}
    loanDates={loanDates}
    loans={loans}
    intl={intl}
  />);

  const twoLineLabel = ({selectedLabel: label}) => {
    const lines = label.split('-');
    return { firstLine: lines[0], secondLine: lines[1] };
  }

  const dropdown = wrapper.find('#statements-dropdown');
  expect(dropdown.props().getOptionLabel).to.equal(twoLineLabel);
  dropdown.simulate('change', { value: 'RECENT_ACTIVITY' });
  expect(selectNewOption).toHaveBeenCalledWith({ value: 'RECENT_ACTIVITY' });
  expect(onFilterChange).toHaveBeenCalledWith('Jun 15, 2018', moment().format('MMM DD, YYYY'));
};

У тестов нет проблем с захватом раскрывающегося списка, чтобы он мог имитировать изменение, но обнаруживает раскрывающийся список "неопределенный", когда я пытаюсь найти реквизиты, которые у него есть.

Как в файле компонента, так и в файле теста я импортирую компонент Dropdown из используемого мной API (нет проблем с доступом к компоненту Dropdown в файле компонента ActivityItemsDropdown).

Ошибка, которую я получаю в Jest:

TypeError: Cannot read property 'equal' of undefined

  175 |
  176 |   const dropdown = wrapper.find('#statements-dropdown');
> 177 |   expect(dropdown.props().getOptionLabel).to.equal(twoLineLabel);
      |   ^

Я прошу прощения, что это действительно долго, но я играл с этим в течение двух часов, и я на этом сошел с ума.

Answer 1

Я не уверен, какую библиотеку утверждений / ожиданий вы используете, но похоже, что вы взяли пример из документации Enzyme.

Фермент использует Чаи ожидают в своих примерах, в то время как вы должны использовать Шут ожидайте .

expect(dropdown.props().getOptionLabel).toEqual(twoLineLabel);