如何測試是否<label>未在 React.JS 中呈現</label>

Question

我正在嘗試測試組件是否在我的代碼中呈現，具體取決於它是否提供給包裝組件。 我正面臨無法檢查它是否的問題，因為我想不出在屏幕上找到它的方法。

  return (
    <>
      <If condition={label?.length > 0}>
        <label htmlFor={name}>
          {label}
        </label>
      </If>

      <Field type="text" id={name} name={name} placeholder={placeholder} />
      <ErrorMessage name={name} component="small" />
    </>
  );

一種（hack-ey）方法是為<label>提供“aria-label”（ <label aria-label="customLabel"/> ），然后使用screen.findByLabelText("customLabel").not.toBeInTheDocument()

如果不直接訪問 DOM 元素，我可以用什么來找到它？

Answer 1

在您的情況下，您需要兩件事：

1. await findBy* 方法來測試你的元素是否被渲染，並且
2. queryBy* 方法來測試您的元素是否未呈現。

當您的元素有條件地呈現時，您需要使用 findBy*，並且您需要與它一起使用 await ( expect(await findBy*(...)).toBeInTheDocument(); )。

此外，您需要模擬您的父/包裝組件，並根據它進行斷言。

從文檔：

getBy...：返回查詢的匹配節點，如果沒有匹配的元素或找到多個匹配項，則拋出描述性錯誤（如果需要多個元素，則使用 getAllBy 代替）。

queryBy...：返回查詢的第一個匹配節點，如果沒有元素匹配，則返回 null。 這對於斷言不存在的元素很有用。 如果找到多個匹配項，則拋出錯誤（如果可以，則使用 queryAllBy 代替）。

findBy...：返回一個 Promise，它在找到與給定查詢匹配的元素時解析。 如果在默認超時 1000 毫秒后未找到任何元素或找到多個元素，則 promise 將被拒絕。 如果您需要查找多個元素，請使用 findAllBy。