[no-node-access] allow using "blur" on DOM elements in addition to "focus"

[danielrentz]

What rule do you want to change?

no-node-access

Does this change cause the rule to produce more or fewer warnings?

Fewer warnings

How will the change be implemented?

The rule should allow calling element.blur(). I have tests that check behavior of some elements after receiving and losing focus. Being able to call "blur" would prevent having to add another helper element just for moving focus somewhere else. (btw, document.body.focus() does not seem to work).

Example code

it("should trigger onBlur handler", () => {
    const onBlur = vi.fn();
    render(<CheckBox onBlur={onBlur} />);
    const input = screen.getByRole("checkbox");
    input.focus();
    expect(onBlur).not.toHaveBeenCalled();
    input.blur();
    expect(onBlur).toHaveBeenCalledOnce();
});

How does the current rule affect the code?

triggers on input.blur()

How will the new rule affect the code?

allows input.blur()

Anything else?

No response

Do you want to submit a pull request to change the rule?

No

[Belco90]

@danielrentz thanks for reporting! This is actually mentioned in the Testing Library - Events considerations guide, so I'm flagging this issue as a bug.

[github-actions]

🎉 This issue has been resolved in version 7.5.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[niklaas]

I have tests that check behavior of some elements after receiving and losing focus. Being able to call "blur" would prevent having to add another helper element just for moving focus somewhere else.

For what it's worth, I actually like the rule because it forces you to simulate the behavior more closely to what an actual user would do.

render returns a container so we adapted our tests to simply click on the container. You could change your MRE to something like

it("should trigger onBlur handler", async () => {
  const onBlur = vi.fn();
  const { container } = render(<CheckBox onBlur={onBlur} />);
  
  const input = screen.getByRole("checkbox");
  
  await screen.click(input)
  expect(onBlur).not.toHaveBeenCalled();
  
  await screen.click(container)
  expect(onBlur).toHaveBeenCalledOnce();
});

Just to provide an alternative.

[danielrentz]

@niklaas Valid point, thanks for the hint. I only tried the body element ... :)