Fel*_*len 4 reactjs jestjs styled-components react-testing-library
我正在尝试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
| 归档时间： |
|
| 查看次数： |
3567 次 |
| 最近记录： |