如何测试<label>是否未在 React 中渲染.JS

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

一种简单的方法是为<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();)。

同样，你需要模拟你的父/包装组件，并依赖于它来做断言。

From the docs:

getBy……:返回查询的匹配节点，并抛出一个如果没有元素匹配或有多个匹配，则会出现描述性错误

queryBy……:返回查询的第一个匹配节点，并返回如果没有匹配的元素，则为空。这对于断言一个元素很有用这是不存在的。如果找到多个匹配项，则抛出错误(如果可以，请使用queryAllBy)。

将其作为findBy

…:返回一个Promise它解析何时找到与给定查询匹配的元素。如果没有找到元素或有多个元素，则拒绝承诺元素在默认超时1000ms后被找到。如果需要的话查找多个元素，使用findAllBy。