我有一个组件库,我正在使用Jest和react-testing-library编写单元测试。基于某些道具或事件,我想验证某些元素没有被渲染。

如果未找到元素,则在react-testing-library中抛出和错误,导致在expect函数触发之前测试失败。

如何使用react-testing-library测试不存在的东西?


当前回答

希望这对你有所帮助

该表显示了函数错误的原因/时间

哪些函数是异步的

函数的return语句是什么

其他回答

您可以使用react-native-testing-library "getAllByType",然后检查该组件是否为空。优点是不必设置testd,也应该与第三方组件一起工作

 it('should contain Customer component', () => {
    const component = render(<Details/>);
    const customerComponent = component.getAllByType(Customer);
    expect(customerComponent).not.toBeNull();
  });

queryByRole的默认行为是只查找一个元素。如果不是,则抛出错误。因此,如果您捕捉到一个错误,这意味着当前查询找到0个元素

expect(
   ()=>screen.getByRole('button')
).toThrow()

如果没有找到任何东西,getByRole返回'null'

 expect(screen.queryByRole('button')).toEqual((null))

findByRole是异步运行的,因此它返回一个Promise。如果它没有找到一个元素,它就拒绝承诺。如果你正在使用这个,你需要运行异步回调

test("testing", async () => {
  let nonExist = false;
  try {
    await screen.findByRole("button");
  } catch (error) {
    nonExist = true;
  }
  expect(nonExist).toEqual(true);
});
    

我最近为一个笑话黄瓜项目写了一个检查元素可见性的方法。

希望对大家有用。

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();
  });
});

当没有找到元素时,getBy*将抛出一个错误,因此您可以检查它

expect(() => getByText('your text')).toThrow('Unable to find an element');