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

【问题标题】：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 模拟媒体查询匹配，但没有成功。

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

【问题讨论】：

标签： reactjs jestjs styled-components react-testing-library

【解决方案1】：

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

getByRole('listitem', { hidden: true })

这包括隐藏的项目。

这里有一个详细说明此更改的提交：https://github.com/testing-library/dom-testing-library/pull/352/files/7cdfcfa466774ca78940330fe95d00c9e744b673

【讨论】：