使用 Angular CLI 生成单元测试（可选）

2020-08-20 08:00:00 · 飞浪

介绍 AngularCLI是一款功能强大的工具，可帮助您为Angular应用生成代码并搭建框架。在单元测试方面，AngularCLI可让您选择性地生成单元测试以及搭建的实体（例如组件和服

介绍

Angular CLI 是一款功能强大的工具，可帮助您为 Angular 应用生成代码并搭建框架。在单元测试方面，Angular CLI 可让您选择性地生成单元测试以及搭建的实体（例如组件和服务）。在本指南中，您将学习如何使用 CLI 的单元测试生成功能来帮助您全面、轻松地测试应用。

开始使用 Angular CLI

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

      npm install -g @angular/cli

Angular CLI 是一个抽象层，由名为 Schematics 的库提供底层支持。借助 Angular Schematics 的脚手架功能，Angular CLI 公开了许多命令。您可以通过运行以下命令来生成新的 Angular 应用：

      ng new test-app

此命令将在当前目录中创建一个名为test-app 的新 Angular 应用。默认情况下，Angular CLI 将为您的应用生成一个根组件，并附带一个.spec.ts文件。这一点很重要。每个为您搭建新代码的 Angular CLI 命令也会默认生成一个附带的单元测试。对于ng generate service或ng generate component等命令来说，情况确实如此。

下面，您可以看到通过运行ng gc my搭建的组件生成的单元测试的示例。

      import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
    

从上面的代码可以看出，CLI 为您设置了测试平台和组件实例，以便您可以专注于创建需要创建的单独的IT单元测试块。

选择退出单元测试生成

生成新组件或服务时，默认包含单元测试是一种最佳实践。但如果您需要选择退出，该怎么办？您可能想要生成一个辅助服务，并打算直接用于端到端测试，或者您有自己的自定义测试解决方案。无论哪种情况，您都需要一种选择退出单元测试生成的方法。

通过在脚手架命令中添加--skipTests参数，可以轻松选择退出单元测试生成。例如，以下命令将生成一个没有单元测试的新服务：ng g service --skipTests。

结论

在本指南中，您了解了如何使用 Angular CLI 生成单元测试。现在，您知道默认情况下可以充分利用 Angular 的单元测试搭建功能，而无需使用任何自定义命令行参数。现在，您可以放心地通过 CLI 为组件、服务、管道、防护装置和其他与 ng generate 命令协同工作的实体生成单元测试。有关更多信息，您可以随时查看 Angular文档的相关部分。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 Angular CLI 生成单元测试（可选）

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MyComponent } from './my.component'; describe('MyComponent', () => { let component: MyComponent; let fixture: ComponentFixture<MyComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ MyComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(MyComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); });