我有一个组件库,我正在使用Jest和react-testing-library编写单元测试。基于某些道具或事件,我想验证某些元素没有被渲染。
如果未找到元素,则在react-testing-library中抛出和错误,导致在expect函数触发之前测试失败。
如何使用react-testing-library测试不存在的东西?
我有一个组件库,我正在使用Jest和react-testing-library编写单元测试。基于某些道具或事件,我想验证某些元素没有被渲染。
如果未找到元素,则在react-testing-library中抛出和错误,导致在expect函数触发之前测试失败。
如何使用react-testing-library测试不存在的东西?
当前回答
// check if modal can be open
const openModalBtn = await screen.findByTestId("open-modal-btn");
fireEvent.click(openModalBtn);
expect(
await screen.findByTestId(`title-modal`)
).toBeInTheDocument();
// check if modal can be close
const closeModalBtn = await screen.findByTestId(
"close-modal-btn"
);
fireEvent.click(closeModalBtn);
const sleep = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
await sleep(500);
expect(screen.queryByTestId("title-modal")).toBeNull();
其他回答
希望这对你有所帮助
该表显示了函数错误的原因/时间
哪些函数是异步的
函数的return语句是什么
我最近为一个笑话黄瓜项目写了一个检查元素可见性的方法。
希望对大家有用。
public async checknotVisibility(page:Page,location:string) :Promise<void>
{
const element = await page.waitForSelector(location);
expect(element).not.toBe(location);
}
你必须使用querybytestd而不是getbytestd。
这里是一个代码示例,我想测试是否组件与“汽车”id不存在。
describe('And there is no car', () => {
it('Should not display car mark', () => {
const props = {
...defaultProps,
base: null,
}
const { queryByTestId } = render(
<IntlProvider locale="fr" messages={fr}>
<CarContainer{...props} />
</IntlProvider>,
);
expect(queryByTestId(/car/)).toBeNull();
});
});
对我来说(如果你想使用getbytestd):
expect(() => getByTestId('time-label')).toThrow()
来自DOM测试库文档-出现和消失
Asserting elements are not present The standard getBy methods throw an error when they can't find an element, so if you want to make an assertion that an element is not present in the DOM, you can use queryBy APIs instead: const submitButton = screen.queryByText('submit') expect(submitButton).toBeNull() // it doesn't exist The queryAll APIs version return an array of matching nodes. The length of the array can be useful for assertions after elements are added or removed from the DOM. const submitButtons = screen.queryAllByText('submit') expect(submitButtons).toHaveLength(2) // expect 2 elements not.toBeInTheDocument The jest-dom utility library provides the .toBeInTheDocument() matcher, which can be used to assert that an element is in the body of the document, or not. This can be more meaningful than asserting a query result is null. import '@testing-library/jest-dom/extend-expect' // use `queryBy` to avoid throwing an error with `getBy` const submitButton = screen.queryByText('submit') expect(submitButton).not.toBeInTheDocument()