Я пытаюсь написать шутные тесты для моего компонента React с выпадающим списком, подобным этому:
<select id="dropdown" onInput={this.handlechange} ref={this.refDropdown}>
{this.props.items.map(item => {
return (
<option key={item.id} value={item.id}>
{item.name}
</option>
);
})}
</select>
, и обработчик выглядит так:
handlechange = () => {
const sel = this.refDropdown.current;
const value = sel.options[sel.selectedIndex].value;
//...
}
Я хочуИмитация пользователя, выбирающего 2-ую запись (или что-либо, кроме первой) в списке, но у меня возникли проблемы.Если я имитирую событие «change», оно запускает вызов handlechange()
, но selectedIndex
всегда устанавливается в ноль.
Я пробовал этот код в тесте jest, но он не вызывает selectedIndex
быть доступным в обработчике.
const component = mount(<MyComponent/>);
component.find("#dropdown").simulate("change", {
target: { value: "item1", selectedIndex: 1 }
});
То, что происходит, почти правильно.Если я посмотрю на входящее событие, я увижу, что e.value
установлен на «item1», но он не действует, как будто выбор был фактически сделан.
Я также пытался попытатьсяотправлять имитации «щелчка» непосредственно в элемент Option, но это ничего не делает.
Как правильно имитировать выделение из раскрывающегося списка?