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

Question

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

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

form.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)
        }
    };

form.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 保留 returning Body 元素，但我希望它 return 两个输入中的任何一个。 expect(input2).toHaveFocus() 也失败了。

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

Answer 1

我最终使用了@testing-library/user-event 库。我将 fireEvent 替换为 userEvent 用于 Tab 新闻。

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

    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

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

How to test which input has the focus when tab button is pressed

javascript

reactjs

jestjs

react-testing-library