无法测试样式显示的元素：无

Posted 2023-02-22

技术标签:

【中文标题】无法测试样式显示的元素：无【英文标题】：Can't test element which is styled to display: none 【发布时间】：2020-09-04 16:45:39 【问题描述】：

我正在尝试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 模拟媒体查询匹配，但没有成功。

我根本不关心测试媒体查询或样式，那么有没有办法告诉样式化组件在测试期间不应用样式？

【问题讨论】：

【参考方案1】：

我找到了一种解决方案，它是 dom-testing-library 的一个特性：