Question

我正在尝试在其中一个输入框中按输入。手动执行此操作会触发事件侦听器，但在尝试使用酶时，不会触发事件侦听器。我在这里做错了什么？

事件监听器

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测试而构建的Enzyme可能不了解您的本机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>

酶wrapper.find（..）。模拟按键不会触发事件监听器

2 个答案: