@testing-library getByRole 不会 return 被 CSS 隐藏的元素

Question

这可能是预期的行为，但我想确保并找到替代方法。

假设，有一个反应元素
<span role="presentation" className="ag-hidden">
其中 ag-hidden 在样式表中定义为 .ag-hidden { visibility: hidden; } 或 display: none.
样式表被注入 DOM.

screen.getAllByRole("presentation") 没有 return 元素。
如果从 DOM 中删除样式表，则找到该元素。
通过test id找到类似的隐藏元素，像这样：
<span data-test="el" className="ag-hidden">

我想使用下面的方法，但效果很奇怪：

const selector = ".ag-hidden"l
const hiddenByRoleAndSelector = screen.queryByRole("presentation", {
  name: (_: string, el: Element) => {
    // the required element gets here, and it matches the selector
    console.log("n", el.matches(selector), el);
    // so we return true for it
    return el.matches(selector);
  }
});

// ...but eventually get null

那么我该如何测试被样式隐藏的元素呢？（不总是求助于测试 ID 或可本地化的标签、文本等）

Here is the codesandbox demo.

Answer 1

RTL 的关键在于它测试用户在屏幕上看到的内容。但我知道，当您需要测试一个非常具体的元素时，有时会令人沮丧。

您有一个 underlying jest jsdom 选择器形式的逃生舱口。您可以像在浏览器中一样使用 querySelector 来查找特定的 class，例如 ag-hidden。或者你可以使用 data-test-id 正如你已经展示的那样。

@testing-library getByRole 不会 return 被 CSS 隐藏的元素

@testing-library getByRole does not return elements hidden by CSS

css

testing-library