跳至主要内容

Angular 测试库

Angular 测试库 在 DOM 测试库 的基础上，添加了用于处理 Angular 组件的 API。从 ATL 17 版本开始，你还需要安装 @testing-library/dom

npm install --save-dev @testing-library/angular @testing-library/dom

或者，您可以使用 ng add 命令。这将设置您的项目以使用 Angular 测试库，其中还包括 @testing-library/dom 的安装。

ng add @testing-library/angular

问题​

您想要为 Angular 组件编写可维护的测试。作为此目标的一部分，您希望您的测试避免包含组件的实现细节，而是专注于让您的测试为您提供它们旨在提供的信心。作为其中的一部分，您希望您的测试基础在长期内是可维护的，这样您组件的重构（对实现的更改，而不是功能）不会破坏您的测试，从而减慢您和您团队的速度。

解决方案​

Angular 测试库 是一款非常轻量级的 Angular 组件测试解决方案。它在 DOM 测试库 之上提供了轻量级的实用程序函数，以鼓励更好的测试实践。其主要指导原则是

您的测试越接近软件的使用方式，它们就能带给您越多的信心。

因此，您的测试将不会处理渲染的 Angular 组件的实例，而是会处理实际的 DOM 节点。此库提供的实用程序功能有助于像用户一样查询 DOM。根据标签文本查找表单元素（就像用户一样），根据文本查找链接和按钮（就像用户一样）。它还公开了一种推荐的方法，使用 data-testid 查找元素，作为对文本内容和标签没有意义或不切实际的元素的“逃生舱”。

此库鼓励您的应用程序更易于访问，并允许您让您的测试更接近用户使用组件的方式，这使得您的测试能够让您更有信心相信您的应用程序在真实用户使用时会正常工作。

Angular 测试库

  • 重新导出 DOM 测试库 中的 query 和 fireEvent 实用程序函数。
  • 封装组件的 fireEvent 函数，以便在事件发生后自动调用 detectChanges()
  • 与测试框架无关，它可以在任何测试框架上运行