我有一个组件库,我正在使用Jest和react-testing-library编写单元测试。基于某些道具或事件,我想验证某些元素没有被渲染。
如果未找到元素,则在react-testing-library中抛出和错误,导致在expect函数触发之前测试失败。
如何使用react-testing-library测试不存在的东西?
我有一个组件库,我正在使用Jest和react-testing-library编写单元测试。基于某些道具或事件,我想验证某些元素没有被渲染。
如果未找到元素,则在react-testing-library中抛出和错误,导致在expect函数触发之前测试失败。
如何使用react-testing-library测试不存在的东西?
当前回答
另一个解决方案:您也可以使用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();
}
其他回答
您可以使用react-native-testing-library "getAllByType",然后检查该组件是否为空。优点是不必设置testd,也应该与第三方组件一起工作
it('should contain Customer component', () => {
const component = render(<Details/>);
const customerComponent = component.getAllByType(Customer);
expect(customerComponent).not.toBeNull();
});
你必须使用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();
});
});
// 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();
我最近为一个笑话黄瓜项目写了一个检查元素可见性的方法。
希望对大家有用。
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()