我有一个组件库,我正在使用Jest和react-testing-library编写单元测试。基于某些道具或事件,我想验证某些元素没有被渲染。
如果未找到元素,则在react-testing-library中抛出和错误,导致在expect函数触发之前测试失败。
如何使用react-testing-library测试不存在的东西?
我有一个组件库,我正在使用Jest和react-testing-library编写单元测试。基于某些道具或事件,我想验证某些元素没有被渲染。
如果未找到元素,则在react-testing-library中抛出和错误,导致在expect函数触发之前测试失败。
如何使用react-testing-library测试不存在的东西?
当前回答
希望这对你有所帮助
该表显示了函数错误的原因/时间
哪些函数是异步的
函数的return语句是什么
其他回答
我最近为一个笑话黄瓜项目写了一个检查元素可见性的方法。
希望对大家有用。
public async checknotVisibility(page:Page,location:string) :Promise<void>
{
const element = await page.waitForSelector(location);
expect(element).not.toBe(location);
}
对我来说(如果你想使用getbytestd):
expect(() => getByTestId('time-label')).toThrow()
另一个解决方案:您也可以使用try/catch块
expect.assertions(1)
try {
// if the element is found, the following expect will fail the test
expect(getByTestId('your-test-id')).not.toBeVisible();
} catch (error) {
// otherwise, the expect will throw, and the following expect will pass the test
expect(true).toBeTruthy();
}
使用queryBy / queryAllBy。
如您所说,如果没有找到任何东西,getBy*和getAllBy*将抛出一个错误。
然而,等效的方法queryBy*和queryAllBy*返回null或[]:
queryBy queryBy*查询返回查询的第一个匹配节点,如果没有匹配的元素则返回null。这对于断言不存在的元素非常有用。如果找到多个匹配项,则会抛出(使用queryAllBy代替)。 queryAllBy queryAllBy*查询返回一个包含所有匹配节点的数组,如果没有元素匹配则返回一个空数组([])。
https://testing-library.com/docs/dom-testing-library/api-queries#queryby
因此,对于您提到的特定两个查询,您将使用queryByText和querybytestd,但它们适用于所有查询,而不仅仅是这两个查询。
const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist
expect(submitButton).not.toBeNull() // it exist