Как проверить элемент ввода с даталистом в энзиме / шутке?

Question

Я изначально использовал элемент Select, делал поиск и проверял дочерние элементы, чтобы увидеть, содержат ли опции ожидаемые значения. Но с тех пор я перешел на использование элемента Input с списком данных, чтобы разрешить ввод текста в произвольной форме, а также выбор параметров, однако я не вижу, как проверить то же самое.

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

Код моей реакции

<input type="text" list="categories" ref={this.categoryInput} className="Modal-Comment" name="CategoryInput" value={this.state.enteredCategory} onChange={ (e) => this.handleCategoryChanged(e)}/>
    <datalist id="categories">
        {this.groupOptions.map(o => this.MakeOption(o, this.state.enteredCategory))}
    </datalist>

и мой тестовый код Enyzme, который ранее проверял элемент select

  const categorySelect = wrapper.find('select').find('[name="CategoryInput"]');
  expect(categorySelect.exists()).toEqual(true);
  expect(categorySelect.children().filterWhere(x => x.text() === 'Expected option 1').length).toEqual(1);
  expect(categorySelect.children().filterWhere(x => x.text() === 'Expected option 2').length).toEqual(1);

Я понимаю, что должен изменить find (), чтобы искать тип ввода, что нормально, но тогда я не знаю, как искать сгенерированные опции в списке данных. Приведенный выше тестовый код возвращает 0 соответствующих элементов, я полагаю, потому что список данных не является дочерним элементом ввода. В каком случае, как мне это проверить?

Answer 1

Возможно, вам следует проверить метод (например, метод MakeOption) напрямую - может быть, в этом случае или в других случаях, когда невозможно проверить результаты с помощью реквизита или состояния, это может быть лучше.

код должен выглядеть примерно так:

const wrapper = shallow(<NameOfComponent />);
expect(wrapper.instance().methodName()).toEqual(someValue);

Answer 2

Поскольку элемент списка данных не является прямым дочерним элементом элемента ввода, вы должны создать отдельный селектор для элемента списка данных:

const datalist = wrapper.find('#categories');

expect(datalist.children().length).toEqual(3);