Angular CLI - ng test 命令

本章解释了 ng test 命令的语法、参数和选项，并附带示例。

语法

ng test 命令的语法如下：

ng test <project> [options]
ng t <project> [options]

ng test 运行 Angular 应用代码的单元测试用例。

参数

ng test 命令的参数如下：

序号	参数 & 语法	描述
1	<project>	要测试的项目名称。

选项

选项是可选参数。

序号	选项 & 语法	描述
1	--browsers=browsers	覆盖运行测试的浏览器。
2	--codeCoverage=true\|false	输出代码覆盖率报告。默认值：false
3	--codeCoverageExclude	要从代码覆盖率中排除的 glob 模式。
4	--configuration=configuration	一个命名的构建目标，如 angular.json 的“configurations”部分中指定。每个命名目标都带有该目标的选项默认值配置。显式设置此选项会覆盖“--prod”标志别名：-c
5	--help=true\|false\|json\|JSON	在控制台中显示此命令的帮助信息。默认值：false
6	--include	要包含的文件的 glob 模式，相对于工作区或项目根目录。有两种特殊情况：当提供目录路径时，将包含所有以“.spec.@(ts\|tsx)”结尾的规范文件。当提供文件路径时，如果存在匹配的规范文件，则将包含该文件。
7	--karmaConfig=karmaConfig	Karma 配置文件的名称。
8	--main=main	主入口文件的名称。
9	--poll	启用并定义文件监视轮询时间段（以毫秒为单位）。
10	--polyfills=polyfills	polyfills 文件的名称。
11	--preserveSymlinks=true\|false	解析模块时不使用真实路径。默认值：false
12	--prod=true\|false	“--configuration=production”的简写。如果为 true，则将构建配置设置为生产目标。默认情况下，生产目标在工作区配置中设置，以便所有构建都使用捆绑、有限的 tree-shaking 和有限的死代码消除。
13	--progress=true\|false	在构建时将进度日志记录到控制台。
13	--progress=true\|false	在构建时将进度日志记录到控制台。
14	--reporters	要使用的 Karma 报告器。直接传递给 karma 运行器。
15	--sourceMap=true\|false	输出源映射。默认值：true
16	--tsConfig=tsConfig	TypeScript 配置文件的名称。
17	--watch=true\|false	文件更改时运行构建。
18	--webWorkerTsConfig=webWorkerTsConfig	Web Worker 模块的 TypeScript 配置。

首先移动到使用ng build命令更新的 Angular 项目。本章的链接是 https://tutorialspoint.com/angular_cli/angular_cli_ng_build.htm.

现在运行测试命令。

示例

下面给出了 ng test 命令的示例：

\>Node\>TutorialsPoint> ng test
...
WARN: ''app-goals' is not a known element:
1. If 'app-goals' is an Angular component, then verify that it is part of this module.
2. If 'app-goals' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
Chrome 83.0.4103 (Windows 7.0.0): Executed 0 of 4 SUCCESS (0 secs / 0 secs)
...
AppComponent should render title FAILED
   TypeError: Cannot read property 'textContent' of null
      at <Jasmine>
      at UserContext.<anonymous> (https://:9876/_karma_webpack_/src/app/app.component.spec.ts:33:51)
            ...
Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 4 (1 FAILED) (0 secs / 0.203 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 4 (1 FAILED) (0 secs / 0.221 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 4 of 4 (1 FAILED) (0 secs / 0.244 sec
Chrome 83.0.4103 (Windows 7.0.0): Executed 4 of 4 (1 FAILED) (0.282 secs / 0.244
 secs)
TOTAL: 1 FAILED, 3 SUCCESS

现在要修复失败，请更新 app.component.spec.ts

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));

   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.componentInstance;
      expect(app).toBeTruthy();
   });
});

现在运行测试命令。

示例

下面给出了一个示例：

\>Node\>TutorialsPoint> ng test
...
WARN: ''app-goals' is not a known element:
1. If 'app-goals' is an Angular component, then verify that it is part of this m
odule.
2. If 'app-goals' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@
NgModule.schemas' of this component to suppress this message.'
Chrome 83.0.4103 (Windows 7.0.0): Executed 1 of 2 SUCCESS (0 secs / 0.053 secs)
...
Chrome 83.0.4103 (Windows 7.0.0): Executed 2 of 2 SUCCESS (0.097 secs / 0.073 se
cs)
TOTAL: 2 SUCCESS

ng test 还会打开浏览器并显示测试状态。

打印页面