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.

[gnapse]

The input has autoFocus enabled, so it is understandable that it has focus. Can you try without autoFocus to see if it works?

Though I'd add this: even though fireEvent.click(codeInput) is too low level and won't actually set focus on the input, in real life if you click on the input element, that'll also set focus on the input. So the situation you're describing in your test has multiple angles through which the input should end up having focus. I wonder why you so adamantly expect it not to have focus. 🤔

And last but not least, I suggest you use userEvent.click(codeInput) instead of fireEvent.click(codeInput). It's on a separate library though. Check it out: https://github.com/testing-library/user-event

[jamestrew]

Hi gnapse,
I was able to resolve the issue. Firstly, like you suspected, I was clicking on the wrong element, clicking the input element and expecting the focus to divert from it 🙃. But this wasn't enough to pass the test. So I also replaced fireEvent with userEvent and that did the trick.

Thanks very much for the help!