Как смоделировать событие onKeyDown, используя Jest / Enzyme? - PullRequest
Новая
       9

Как смоделировать событие onKeyDown, используя Jest / Enzyme?

3 голосов
/ 11 марта 2020

Я создаю простой калькулятор с Javascript / ReactHooks, который имеет поле ввода с атрибутом onKeyDown: 

// from Calculator.js, in the return statement
<input id="input" value={inputLine} type="text" onKeyDown={(i) => setInputLineFromKeydown(i)} readOnly></input>

Функция setInputLineFromKeydown обрабатывает отображение того, что набрано в поле ввода, и ищет важные клавиши такие как «Enter» или «=» (чтобы знать, когда начинать вычисления). Вот где я пытаюсь протестировать его с помощью Jest / Enzyme: 

// from Calculator.test.js
const wrapper = shallow(<Calculator />);
it('should be able to call setInputLineFromKeydown', () => {
    wrapper.find('input').simulate('keypress', {key: '1'});
    wrapper.find('input').simulate('keypress', {key: '+'});
    wrapper.find('input').simulate('keypress', {key: '2'});
    wrapper.find('input').simulate('keypress', {key: 'Enter'});
});

Хотя этот тест «проходит», из покрытия кода видно, что клавиши не нажимаются (ниже приведен код из моего калькулятора. js fl ie, тестовое покрытие показывает, что строка, включающая "i.key === 'Enter'", не покрыта) 

// from Calculator.js
const setInputLineFromKeydown = (i) => {
        let screen = document.getElementById("input");
        i.persist();

        if (isFinite(i.key) ||
            (i.key === "+" || i.key === "-" || i.key === "*" || i.key === "/"
           || i.key === "=" || i.key === "Enter" || i.key === "c")) {

            setInputLine(inputLine + i.key);
...
}

Почему имитация нажатия клавиши не работает нормально?

...