Angular CLI ng test 命令


本章通过示例解释 ng test 命令的语法、参数和选项。

语法


ng test 命令的语法如下:

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

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

论据


ng test 命令的参数如下:

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

Options


选项是可选参数。

序号. 选项和语法 描述
1 --browsers=浏览器 覆盖运行测试的浏览器。
2 --codeCoverage=真|假

输出代码覆盖率报告。

默认值:假

3 --codeCoverageExclude 要从代码覆盖范围中排除的 Glob。
4 --配置=配置

命名的构建目标,在 angular.json 的“配置”部分中指定。每个命名的目标都伴随着该目标的选项默认配置。显式设置它会覆盖“--prod”标志

别名:-c

5 --help=true|false|json|JSON

在控制台中显示此命令的帮助消息。

默认值:假

6 - 包括

要包含的文件的全局,相对于工作区或项目根目录。有两种特殊情况:

  • 提供目录路径时,将包含所有以“.spec.@(ts|tsx)”结尾的规范文件。

  • 当提供了文件的路径并且存在匹配的规范文件时,它将被包含在内。

7 --karmaConfig=业力配置 Karma 配置文件的名称。
8 --main=main 主入口点文件的名称。
9 --poll 启用并定义文件监视轮询时间段(以毫秒为单位)。
10 --polyfills=polyfills polyfills 文件的名称。
11 --preserveSymlinks=true|false

解析模块时不要使用真实路径。

默认值:假

12 --prod=真|假 “--configuration=production”的简写。如果为 true,则将构建配置设置为生产目标。默认情况下,生产目标是在工作空间配置中设置的,因此所有构建都使用捆绑、有限的 tree-shaking 以及有限的死代码消除。
13 --进度=真|假 在构建时将进度记录到控制台。
13 --进度=真|假 在构建时将进度记录到控制台。
14 ——记者 噶记者使用。直接传给了业力跑者。
15 --sourceMap=true|false

输出源图。

默认值:真

16 --tsConfig=tsConfig TypeScript 配置文件的名称。
17 --watch=真|假 文件更改时运行构建。
18 --webWorkerTsConfig=webWorkerTsConfig Web Worker 模块的 TypeScript 配置。

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

现在运行test 命令。

例子


下面给出一个 ng test 命令的例子:

\>Node\>NewbieGo> 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> (http:// localhost: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();
    });
});

现在运行test 命令。

例子


下面给出一个例子:

\>Node\>NewbieGo> 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 还会打开浏览器并显示测试状态。

Unit Test