使用 React 測試庫查找下一個 DOM 元素

Question

這是我要測試的組件的 HTML 結構

  <body>
    <div>
      <div>
        <fieldset>
          <label>
            <span>
              Start date
            </span>
          </label>
          <input
            type="date"
            value="10.11.2020"
          />
        </fieldset>
        <fieldset>
          <label>
            <span>
              End date
            </span>
          </label>
          <input
            type="date"
            value="22.12.2022"
          />
        </fieldset>
      </div>
    </div>
  </body>

我想要做的是找到開始和結束日期輸入標簽並單擊它們。

不幸的是，我無法更改此標記 - 我無法將例如data-testid="start-input"添加到第一個輸入標簽

RTL 文檔說我應該嘗試通過文本或角色來查找元素——這樣我就可以找到字段集角色，或者，我一直在嘗試做的是——找到標簽文本，然后嘗試獲得最接近的輸入元素，所以這個；

const DateRange = renderComponent();
const StartDateInput = DateRange.getByText('Start date').closest('input');

控制台日志記錄StartDateInput返回null - 如果我刪除.closest('input')我有 label 標簽元素，因此該部分至少到那時為止是正確的

我找不到任何關於如何執行此操作的 RTL 文檔 - 如果有人知道任何文檔並且可以指出正確的方向，那將是驚人的

Answer 1

我不確定我的問題是否可行（我希望有人告訴我是否可行）......但我確實找到了解決問題的方法

只需按顯示值搜索 DOM / HTML 元素

const StartDateInput = DateRange.getByDisplayValue('2020-11-11');

請注意，這不適用於原始問題中的代碼，因為我想說明我犯的一個錯誤，這個錯誤對我來說浪費了很多時間

在我的測試中，我設置了 mockStart 和 mockEnd 日期

let mockStartDate = '11.11.2020';
let mockEndDate = '11.11.2022';

這導致測試告訴我“無法找到具有顯示值的元素：2020 年 11 月 11 日”，因為這是無效的日期格式……將字符串更新為此解決了問題；

let mockStartDate = '2020-11-11';
let mockEndDate = '2022-11-11';

使用 React 測試庫查找下一個 DOM 元素

問題描述

1 個解決方案

解決方案1
0 2022-03-07 16:16:02

使用 React 測試庫查找下一個 DOM 元素

問題描述

1 個解決方案

解決方案1 0 2022-03-07 16:16:02

解決方案1
0 2022-03-07 16:16:02