我正在尝试 getByRole我有一个 <li /> ，它是样式组件的子项。
样式组件默认为 display: none ，然后在 min-width 下媒体查询设置为 display: flex .
运行 getByRole('listitem')无需 display: none 即可工作但不是用它，表明styled-components告诉 DOM 因为它被设置为 display: none它不存在。
尽管调试 HTML 输出实际上显示了 <li />正在呈现:
TestingLibraryElementError: Unable to find an accessible element with the role "listitem"
Here are the accessible roles:
document:
Name "":
<body />
--------------------------------------------------
<body>
<div>
<div>
<ul
class="sc-gzVnrw sc-VigVT kjwzNy"
>
<li><!-- bunch of stuff</li>
</ul>
</div>
</div>
</body>
我曾尝试使用
jest-matchmedia-mock 来模拟媒体查询匹配，没有运气。我根本不关心测试媒体查询或样式，所以有没有办法告诉样式组件在测试期间不应用样式？
最佳答案
我找到了一种解决方案，它是 dom-testing-library 的一个特性:
getByRole('listitem', { hidden: true })
这包括隐藏元素。
此处有一个详细说明此更改的提交:https://github.com/testing-library/dom-testing-library/pull/352/files/7cdfcfa466774ca78940330fe95d00c9e744b673
关于reactjs - 无法测试样式为显示 : none 的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61877163/