Question

我正在使用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'});
});

尽管此测试“通过”，但从代码覆盖率我可以看到没有按下键（下面是来自Calculator.js flie的代码，测试覆盖率显示包含“ 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);
...
}

为什么模拟按键不能正常工作？

如何使用Jest / Enzyme模拟onKeyDown事件？

0 个答案: