title: How to test which input has the focus when tab button is pressed
body: <p>I'm building a React autocomplete component and testing it using Jest and React-testing-library.</p>
  <p>I have two inputs. When input1(with autocomplete functionality) is in focus, clicking the <code>Tab</code> button should either auto fill input1 with a text if input1 isn't empty, <strong>or</strong> move the focus to input2(which is the default behaviour of forms) if input1 is empty.</p>
  <p><strong>form.jsx</strong></p>
  <pre><code>    const onKeyDown = (e) =&gt; {
          if(e.key === 'Tab' &amp;&amp; e.target.value !== '') {
              setInput1Text('some-autocomplete-text');
              e.preventDefault(); //prevent focus from moving to the next input(input2)
          }
      };
  </code></pre>
  <p><strong>form.test.jsx</strong></p>
  <pre><code>    test('pressing Tab button should move focus to input2 as input1 is empty', () =&gt; {
          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 &lt;Body&gt;
          // OR
          expect(input2).toHaveFocus(); //failing as well.
      });
  </code></pre>
  <p>Currently, in my tests, <code>document.activeElement</code> keeps returning the <code>Body</code> element but I expect it to return either of the two inputs. Also <code>expect(input2).toHaveFocus()</code> fails.</p>
  <p>How can I test that the focus has moved from input1 to input2?</p>