按下选项卡按钮时如何测试哪个输入具有焦点

Question

我正在构建一个 React 自动完成组件并使用 Jest 和 React-testing-library 对其进行测试。

我有两个输入。 当 input1（具有自动完成功能）处于焦点时，如果 input1 不为空，则单击Tab按钮应该使用文本自动填充 input1，或者如果 input1 为空，则将焦点移至 input2（这是表单的默认行为）。

表单.jsx

    const onKeyDown = (e) => {
        if(e.key === 'Tab' && e.target.value !== '') {
            setInput1Text('some-autocomplete-text');
            e.preventDefault(); //prevent focus from moving to the next input(input2)
        }
    };

表单.test.jsx

    test('pressing Tab button should move focus to input2 as input1 is empty', () => {
        const input1 = container.getElementsByTagName('input')[0];
        const input2 = container.getElementsByTagName('input')[1];

        fireEvent.change(input1, { target: { value: '' } });
        fireEvent.keyDown(input1, { key: 'Tab' });

        expect(input2).toBe(document.activeElement) //failing, activeElement returns <Body>
        // OR
        expect(input2).toHaveFocus(); //failing as well.
    });

目前，在我的测试中， document.activeElement不断返回Body元素，但我希望它返回两个输入中的任何一个。 expect(input2).toHaveFocus()也失败了。

如何测试焦点是否已从 input1 移至 input2？

Answer 1

我最终使用了 @testing-library/user-event 库。 我用userEvent替换了用于Tab按下的fireEvent 。

我的代码现在看起来像这样：

    import userEvent from '@testing-library/user-event';

    test('pressing Tab button should move focus to input2 as input1 is empty', () => {
        const input1 = container.getElementsByTagName('input')[0];
        const input2 = container.getElementsByTagName('input')[1];

        input1.focus();
        fireEvent.change(input1, { target: { value: '' } });
        userEvent.tab(); //this line made it work

        expect(input2).toHaveFocus(); //passing now
    });

参考： https : //github.com/testing-library/user-event#tabshift-focustrap

Answer 2

如果您执行以下操作，function fireEvent.keyDown 应该适合您：

组件和测试都必须使用 KeyDown ，（使用 KeyPressed 是我的问题之一）

然后可以像这样调用 fireEvent：

 fireEvent.keyDown(Element, {key: 'Tab', code: 'Tab', charCode: 9})

有关关键代码的更多信息

按下选项卡按钮时如何测试哪个输入具有焦点

问题描述

2 个解决方案

解决方案1
4 已采纳 2020-10-23 13:20:39

解决方案2
0 2022-11-21 17:51:03

按下选项卡按钮时如何测试哪个输入具有焦点

问题描述

2 个解决方案

解决方案1 4 已采纳 2020-10-23 13:20:39

解决方案2 0 2022-11-21 17:51:03

解决方案1
4 已采纳 2020-10-23 13:20:39

解决方案2
0 2022-11-21 17:51:03