无法使用酶测试来自react-bootstrap-typeahead的AsyncTypeahead

Question

bounty到期在6天内。该问题的答案有资格获得+ 300声望赏金。Oliver Watkins正在寻找来自信誉良好的来源的答案。

我正在尝试从react-bootstrap-typeahead中测试AsyncTypeahead。

我有一个非常简单的测试组件：

class AsyncTypeahead2 extends Component<Props, State> {

    constructor(props: Props) {
        super(props);
        this.state = {
            isLoading: false,
        };
    }
    render() {
        return ( <AsyncTypeahead
            isLoading={this.state.isLoading}
            onSearch={query => {
                this.setState({isLoading: true});
                fetch("http://www.myHTTPenpoint.com")
                    .then(resp => resp.json())
                    .then(json => this.setState({
                        isLoading: false,
                        options: json.items,
                    }));
            }}
            options={this.state.options}
            labelKey={option => `${option.stateName}`}
        /> )
    }
}

const url = "http://www.myHTTPenpoint.com"
fetchMock
    .reset()
    .get(
        url,
        {
            items: [
                {id:1, stateName:"Alaska"},
                {id:2, stateName:"Alabama"}
            ]
        },
    );

（请注意，URL被模拟为返回两个元素）

当我在故事书中运行它时，看起来还不错：

但是，如果我想用酶测试它，它不识别弹出的

项。

    let Compoment =
        <div>Basic AsyncTypeahead Example
            <AsyncTypeahead2/>
        </div>

    const wrapper = mount(Compoment);
    let json = wrapper.html();


    let sel = wrapper.find(".rbt-input-main").at(0)

    sel.simulate('click');
    sel.simulate('change', { target: { value: "al" } });

    expect(wrapper.find(".rbt-input-main").at(0).getElement().props.value).toBe("al")

    expect(wrapper.find(".dropdown-item").length).toBe(2) //but get just 1 element "Type to Search..."

[没有找到两个“下拉项目”项，只有一个带有文本“ Type to Search ...”的项。

AynchTypeahead是否未相对于酶正确更新DOM？

Answer 1

异步。另一方面，<AsyncTypeahead>是

synchronous。因此，在您到达simulate()时，AsyncTypeahead甚至没有开始使用expect()元素填充下拉列表。您需要等待。

未指定，但看起来您正在使用<li>包。有fetch-mock功能，其中>

返回一个由fetch-mock处理的所有提取均已解决的承诺，将解决”

所以

flush

应该工作。