Skip to content

getByRole ignores role "link" on achors without href attribute or falsy value #1306

@MarcoSmeuldersVisma

Description

@MarcoSmeuldersVisma

The getByRole selector won't find a anchor by its "link" role when the href attribute has an empty string, or is missing. Code to reproduce:

import React from "react";
import { render, screen } from "@testing-library/react";

test("will find role", () => {
  render(<a href={"/test"}>demo</a>);

  expect(screen.getByRole("link")).toHaveTextContent("demo")
});

test("will NOT find role", () => {
  render(<a href={""}>demo</a>);

  // Unable to find an accessible element with the role "link"
  expect(screen.getByRole("link")).toHaveTextContent("demo")
});

Using screen.getByRole("link", { hidden: true }) has no effect.

For accessibility purposes, this might be a sane choice. But no-where in any documentation I'm able to find the requirement for ignoring the "link" role from an anchor when a href value is falsy. So I think this is a bug.

I didn't have this issue in version 7.x but in version 8.x it appeared.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions