我在尝试着getByRole我有一个<li />，它是样式组件的子组件。
样式化组件默认为display: none，然后在一个min-width媒体查询设置为display: flex.
Running 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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
