如何在React测试库中测试shift+tab按键？

Question

我在 React 测试库中有这个简单的测试。我正在使用 RTL 版本 12 和“@testing-library/user-event”版本“^13.5.0”。使用 userEvent.tab() 移动焦点效果很好，但使用 userEvent.keyboard('{Shift}{Tab}'); 将其移回原处；不起作用并且焦点停留在按钮上。我尝试按照某些地方的建议使用异步和等待，但它没有解决问题。如何正确地做到这一点才能使班次标签工作？

    it('should enter and leave icon gallery with TAB',  () => {
        render(
            <>
                <input data-test="input1"/>
                <button>Button 1</button>
            </>
          );

          const input1 = screen.getByTestId('input1');
          const button1 = screen.getByRole('button', { name: /^Button 1$/i });;

          userEvent.click(input1);
          expect(input1).toHaveFocus();
          userEvent.tab();
          expect(button1).toHaveFocus();
          userEvent.keyboard('{Shift}{Tab}');
          expect(input1).toHaveFocus();
        })
    })

Answer 1

您在这里所做的事情似乎是按 Shift 键，然后按 Tab 键，并且没有完全按下按键，{Shift}{Tab} 被视为按 Shift，然后按 Tab。

您可以将代码更改为这样

userEvent.keyboard('{Shift>}{Tab}{/Shift}') 

此>可用于在使用/开始释放时保持按键按下状态。

it('should enter and leave icon gallery with TAB',  () => {
    render(
        <>
            <input data-test="input1"/>
            <button>Button 1</button>
        </>
      );

      const input1 = screen.getByTestId('input1');
      const button1 = screen.getByRole('button', { name: /^Button 1$/i });;

      userEvent.click(input1);
      expect(input1).toHaveFocus();
      userEvent.tab();
      expect(button1).toHaveFocus();
      userEvent.keyboard('{Shift>}{Tab}{/Shift}');
      expect(input1).toHaveFocus();
    })
})