如何使用 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())