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

Question

我正在开发一个文本编辑webapp，并使用react- jest 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())