杭州电子商务研究院

使用 Angular CLI 执行单元测试

2020-08-27 08:00飞浪

介绍

Angular CLI 可以说是 Angular 框架中最强大的部分。除了让您能够生成新项目、组件和服务之外,Angular CLI 还为您提供了轻松对应用或项目进行单元测试所需的工具。在本指南中,您将学习如何使用 Angular CLI 测试新的 Angular 项目。您在本指南中学习的基础知识将适用于仍使用默认 Angular 单元测试框架 (Jasmine) 和测试运行器 (Karma) 的现有 Angular 项目。

让我们开始吧!

开始单元测试

可以使用 NPM 运行以下命令将 Angular CLI 下载到你的机器上:

      npm install -g @angular/cli
    

您现在可以使用ng命令访问 CLI。要查看可用命令的完整列表,请运行ng -h。

您将在本指南中学习的命令是ng test命令。首先,您需要创建一个新的 Angular 应用来进行测试。通过 CLI 引导 Angular 应用非常简单,只需运行以下命令:

      ng new dog-breed-app
    

此命令将在当前目录中创建一个名为dog-breed-app 的新 Angular 应用。在下一节中,您将学习如何通过 CLI 测试此项目和未来的 Angular 项目。按照屏幕上的提示操作并等待新应用的所有依赖项下载后,您就可以运行单元测试了!您可以通过 CLI 在根项目目录中运行ng test来执行应用的单元测试。

运行ng test时,会发生两件事。首先,Angular 使用 Karma 测试运行器打开一个新的浏览器窗口,其中包含单元测试的报告机制。基本上,这个窗口会显示测试的输出以及可能发生的任何错误。测试运行器准备就绪后,Angular 会通过 Jasmine 测试框架执行单元测试。

可用选项

ng test命令开箱即用,非常棒!但是,如果您想自定义此命令以更好地满足您的应用需求,该怎么办?Angular 可以满足您的需求!ng test命令提供了一个命名参数,它是可选的,并且对应于您要测试的项目。一个 Angular 工作区可以包含多个项目,因此此功能允许您指定。但是,在这种情况下,我们生成的新应用只有一个默认项目。

除了这个命名参数之外,ng test CLI 命令还有许多其他选项可供您使用。下面,您可以找到一些最有用的选项的细分:

  • browsers:此选项允许您直接指定要在哪些浏览器内运行单元测试
  • codeCoverage:一个布尔值,指示是否要为此单元测试运行生成完整的代码覆盖率报告
  • include:这个非常有用的选项允许您指定全局文件模式,以指定要运行的单元测试(而不是运行所有单元测试)
  • karmaConfig:自定义 Karma 配置的文件路径,您可以通过它进一步自定义单元测试体验
  • 记者:这允许您指定要使用的自定义 Karma 记者
  • watch:如果将此选项设置为 true,则每次更改项目源代码时都会继续重新运行测试

这还不是所有可用的选项!还有其他选项,例如,包括用于单元测试 Web Worker 的精美功能。如您所见,Angular CLI 通过为您提供大量控制和自定义功能,在测试项目时为您提供了全方位的服务。

结论

在本指南中,您学习了如何轻松生成新的 Angular 应用并通过 Angular CLI 为其执行单元测试。您了解到,在使用 Karma 测试运行器时,可以使用ng test命令通过 Jasmine 测试框架执行所有单元测试。您现在还了解了可以直接与ng test命令一起使用的所有选项,以进一步自定义您的单元测试体验。

借助这些可用选项,您可以自信地测试您的 Angular 项目!有关更多信息,请查看 Angular 测试文档。

曝光26217浏览1403