如何使用 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 查询按值查询文本区域元素？

谢谢！

Answer 1

当然问完我就想通了。对于任何感兴趣的人，为我解决的只是 trim 我正在查询的文本中的前导和尾随空格：

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

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

How to query textarea elements by value using react-testing-library and Jest?

javascript

textarea

reactjs

jestjs

react-testing-library