如何使用 react-testing-library 和 Jest 按值查询 textarea 元素？

Question

我正在开发一个文本编辑网络应用程序，并使用 react-testing-library 和 jest 进行测试。 该应用程序具有动态数量的文本区域，为了测试行为，我想使用它的已知值来获取对文本区域的引用，但是，我无法使用 RTL 的查询使其工作。

我尝试了getByText('known cell content')和getByDisplayValue('known cell content') ，但都没有通过测试，并显示找不到文本的消息。 查询的文本显然存在于随附的 DOM 打印输出中：

TestingLibraryElementError: Unable to find an element with the text: som impliserer at . This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

 ...
              <textarea
                class="InputCellstyled__InputCellStyled-sc-1qia2ur-0 cntSTH"
              >
                 R'(t) = 240t^2 + 20t^3 - 10t^4 = -10t^2(t-6)(t+4) = 0
              </textarea>
              <textarea
                class="InputCellstyled__InputCellStyled-sc-1qia2ur-0 cntSTH"
              >
                som impliserer at <--- WHY IS THIS NOT FOUND?
              </textarea>
              <textarea
                class="InputCellstyled__InputCellStyled-sc-1qia2ur-0 cntSTH"
              >
                t = -4 \quad , \quad t = 6 \quad \text{ eller } \quad t=0.
              </textarea>

我目前的解决方法是这段乏味的代码：

Array.from(document.querySelectorAll('textarea')).filter(
      (taEl) => taEl.value === 'known cell content'
    )[0];

这可行，但我更愿意使用 RTL。 如何使用 RTL 的查询按值查询 textarea 元素？

谢谢！

Answer 1

当然，我问了这个问题后马上就明白了。 对于任何有兴趣的人来说，为我解决的只是从我查询的文本中删除前导和尾随空格：

screen.getByText(cell.value.trim())