angular-testing-library测试断言错误值时测试未失败如何解决

问题原因 #

你使用的findByText是异步查询方法，本身返回的是Promise对象，你没有加await直接对返回的Promise本身做toBeTruthy()断言，只要Promise正常生成就会判定为真，和能不能找到对应文本完全没关系，所以测试永远不会失败。

修复方案 #

有两种修复方式可选：

方案1：使用同步查询方法getByText #

静态渲染完成后直接用同步的getByText查询即可，不需要异步处理，代码修改如下：

it('should find the welcome as title', () => {
  expect(screen.getByText(/welcome to Chennaicc/i)).toBeTruthy(); // 此时会正常抛出找不到元素的错误
  expect(screen.getByText(/new title for testx/i)).toBeTruthy(); // 同样会正常失败
});

方案2：保留findByText，增加异步处理 #

如果你的场景需要处理异步渲染（比如内容依赖接口返回、动画渲染等），就给findByText加await，同时把测试用例声明为async：

it('should find the welcome as title', async () => {
  expect(await screen.findByText(/welcome to Chennaicc/i)).toBeTruthy(); // 找不到元素时Promise会reject，测试正常失败
  expect(await screen.findByText(/new title for testx/i)).toBeTruthy();
});

补充说明 #

• getBy*系列是同步查询，找不到元素直接抛出错误，适合静态渲染完成就存在的元素
• findBy*系列是异步查询，本质是getBy* + waitFor的组合，默认超时时间1000ms，适合异步渲染的元素
• queryBy*系列是同步查询，找不到元素返回null，适合断言某个元素不存在的场景

内容的提问来源于stack exchange，提问作者user2024080