酶wrapper.find（..）。模擬按鍵不會觸發事件監聽器

Question

我試圖在輸入框之一上按Enter 。 手動執行此操作會觸發事件偵聽器，但是，在嘗試使用酶時，不會觸發事件偵聽器。 我在這里做錯了什么？

事件監聽器

this.input.addEventListener('keypress', function(event){
            debugger;
            onEnter(event);
        });

酶

function setup(store, props) {
    return mount(<Provider store={store}>
            <component{...props}/>
        </Provider>
    );
}

beforeEach(() => {
        wrapper = setup(store, {});
        searchBar = wrapper.find('searchBar');
        searchInput = searchBar.find("input");
    });

it("when enter is pressed, event should be triggered", ()=> {
            let wait = false;
            runs(()=> {
                searchInput.simulate('change', {target: {value: 'helloWorld'}});
                searchInput.simulate('keyPress', {which: 13});
                setTimeout(()=> {
                    wait = true;
                }, 1000);
            })

            waitsFor(()=> {
                return wait;
            }, "", 1500);
        })

Answer 1

我也在這個問題上掙扎。 但是現在我找到了解決方案。 除了{ which: 13 }參數之外，您還需要至少指定key參數，因此您的模擬表達式將類似於：

searchInput.simulate('keyPress', {
    key: 'Enter',
    keyCode: 13,
    which: 13,
});

Answer 2

專為React測試而構建的酶可能不了解您的本機JavaScript事件偵聽器。 如果您將事件與JSX綁定，則Enzyme應該能夠接收它。 https://reactjs.org/docs/handling-events.html

更改此：

this.input.addEventListener('keypress', function(event){
    debugger;
    onEnter(event);
});

對此：

<searchBar>
    <input onKeypress={this.onEnter.bind(this)} aria-label="Search" />
</searchBar>