Reactjs 如何测试是否<；标签>；未在React.JS中呈现

我试图测试组件是否在代码中呈现，这取决于它是否提供给包装组件。我面临着无法检查它是否存在的问题，因为我想不出在屏幕上找到它的方法

  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" />
    </>
  );

返回(
0}>
{label}
);

一种（hack-ey）方法是为

提供“aria-label”（

），然后使用

screen.findByLabelText（“customLabel”）.not.toBeInTheDocument（）

---

在不直接访问DOM元素的情况下，我可以使用什么来查找它？

在您的情况下，您需要两件事：

等待findBy*方法测试元素是否已呈现，以及

queryBy*方法测试元素是否未呈现

当您的元素被有条件地呈现时，您需要使用findBy*，并且需要同时使用wait（

expect（wait findBy*（…）.toBeInTheDocument（）；

）

此外，还需要模拟父组件/包装组件，并据此进行评估

从：

getBy…：返回查询的匹配节点，并抛出 如果没有匹配的元素或存在多个匹配项，则说明错误 找到（如果需要多个元素，则使用getAllBy）

queryBy…：返回查询的第一个匹配节点，然后返回 如果没有匹配的元素，则为null。这对于断言元素很有用 这是不存在的。如果找到多个匹配项，则抛出错误 （如果可以，则使用queryAllBy）

findBy…：返回一个承诺 它在找到与给定查询匹配的元素时解析。 如果未找到任何元素或多个元素，则拒绝承诺 元素在默认超时1000毫秒后找到。如果你需要 查找多个元素，请使用findAllBy

由于

的存在取决于

标签的值，因此我想不出更好的检查方法。但是，在本例中，您可以使用
data testid
而不是
aria label
属性，以避免添加额外的不必要的
aria-*
属性。