not.toHaveFocus expects element to have focus

[jamestrew]

• @testing-library/react version: 11.2.7
• Testing Framework and version: jest with react-scripts@4.0.3
• DOM Environment: jest-dom@5.14.1

Relevant code or config:

Return jsx being tested

  return (
    <>
      <div
        id="focusWarning"
        data-testid="focusWarning"
        className={focusWarning}
      >
        Click to focus
      </div>
      <div
        id="codeWrapper"
        data-testid="codeWrapper"
        className={blurred}
        onClick={handleClickToFocus}
        ref={blurCodeRef}
      >
                {/* child components */}
      </div>
      <div className="grid justify-items-center py-2">
        <input
          id="codeInput"
          data-testid="codeInput"
          ref={focusInputRef}
          tabIndex={0}
          defaultValue={getBareElements(getLastWord(typed))}
          autoComplete="off"
          onKeyPress={handleKeyPress}
          onKeyDown={(e) => e.key === "Backspace" && handleKeyPress(e)}
          onBlur={handleFocusOut}
          autoFocus
        />
      </div>
    </>
  );

What you did:

Trying to test focus being taken away from the input element.

  it("focus away from codeWrapper", async () => {
    const codeWrapper = screen.getByTestId("codeWrapper");
    const codeInput = screen.getByTestId("codeInput");
    const focusWarning = screen.getByTestId("focusWarning");

    fireEvent.click(codeInput);
    expect(codeInput).not.toHaveFocus();
    expect(focusWarning).not.toHaveClass("hidden");
    expect(codeWrapper).toHaveClass("blurred");
  });

What happened:

  ● CodeWrapper › focus away from codeWrapper

    expect(element).not.toHaveFocus()

    Expected element with focus:
      <input autocomplete="off" data-testid="codeInput" id="codeInput" tabindex="0" value="" />
    Received element with focus:
      <input autocomplete="off" data-testid="codeInput" id="codeInput" tabindex="0" value="" />

      37 |
      38 |     fireEvent.click(codeInput);
    > 39 |     expect(codeInput).not.toHaveFocus();
         |                           ^
      40 |     expect(focusWarning).not.toHaveClass("hidden");
      41 |     expect(codeWrapper).toHaveClass("blurred");
      42 |   });

      at Object.<anonymous> (src/tests/CodeWrapper.test.tsx:39:27)

Reproduction:

Problem description:

The expect and received output is the same:

    Expected element with focus:
      <input autocomplete="off" data-testid="codeInput" id="codeInput" tabindex="0" value="" />
    Received element with focus:
      <input autocomplete="off" data-testid="codeInput" id="codeInput" tabindex="0" value="" />

This test should pass. It looks like the not in not.toHaveFocus is not being picked up.
Perhaps this is an incorrect use on not on my part? I'm fairly new to jest and testing-library.

Suggested solution:

Not familiar enough with this library sorry.