Question

我正在尝试为我的具有以下下拉菜单的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;
    //...
}

我想模拟一个用户，它在列表中选择第二个条目（或除第一个条目以外的任何条目），但是遇到了麻烦。如果我模拟“更改”事件，则会触发对handlechange()的调用，但selectedIndex始终设置为零。

我在玩笑测试中尝试了此代码，但是它不会导致selectedIndex在处理程序中可访问。

const component = mount(<MyComponent/>);
component.find("#dropdown").simulate("change", {
    target: { value: "item1", selectedIndex: 1 }
});

发生的事情几乎是正确的。如果我查看即将到来的事件，则可以看到e.value设置为“ item1”，但它并不像实际选择那样。

我还尝试过将“点击”模拟直接发送到Option元素，但这无济于事。

从下拉列表中模拟选择的正确方法是什么？

Answer 1

尝试这种方法：

      wrapper.find('option').at(0).instance().selected = false;
      wrapper.find('option').at(1).instance().selected = true;

Answer 2

请尝试将html的“ onInput”更改为“ onChange”，因为您是在开玩笑地模拟“ change”事件。

Answer 3

您可以触发更改事件，因为您有 this.handlechange 触发器onChange：

const component = mount(<MyComponent/>);
component.find('#dropdown').at(0).simulate('change', {
    target: { value: 'item1', name: 'item1' }
});

我会说您必须添加.at（0），因为即使您只有一个带有该ID的元素，enayme也会找到值列表。

如何在Jest /酶测试中模拟从下拉列表中选择？

3 个答案: