如何在 Angular 中使用 Jasmine 进行单元测试？

单元测试是现代软件开发过程中不可或缺的一环，Angular 所采用的单元测试框架是 Jasmine。本文将为你提供一份如何在 Angular 中使用 Jasmine 进行单元测试的详细指南。

环境搭建

在开始 Jamsine 单元测试前，我们需要安装 node.js 环境以及 Angular CLI。在确认环境已经搭建完成之后，我们就可以通过Angular CLI 创建项目或者使用现有项目开始构建测试。

单元测试的好处

单元测试是一个可以极大提升代码质量以及减少 Bug 数量的好工具。当案例测试覆盖到 90% 时，你可能只会遇到 10% 的错误，因为剩下的 90% 已经被覆盖并解决了问题。

Jasmine 入门

我们创建一个 Angular 的组件，来使用 Jasmine 渲染它并且测试其行为和状态。

// javascriptcn.com 代码示例
import {Component} from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `<div>Hello {{name}}</div>`
})
export class HelloWorldComponent {
  name = 'Angular';
}

这里创建一个简单的 HelloWorld 组件，并通过模板将其渲染出来。我们可以在 HelloWorld 的_spec.ts 文件中使用 Jasmine 进行测试。

// javascriptcn.com 代码示例
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { HelloWorldComponent } from './hello-world.component';

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

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

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

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

  it('should render name', () => {
    expect(fixture.nativeElement.querySelector('div').textContent).toContain(component.name);
  });
});

这里我们通过使用 TestBed 辅助测试，可以帮助我们进行组件的创建和引入。在 beforeEach 钩子函数中，我们定义了 fixture 变量和 component 变量，并分别分别赋值给了 TestBed.createComponent() 和 fixture.componentInstance。

接着在 it 函数中，既可以进行组件的创建行为测试，如 expect(component).toBeTruthy();，也可以测试状态、输入和输出等，如 expect(fixture.nativeElement.querySelector('div').textContent).toContain(component.name);;

当你执行 ng test 命令后，Jasmine 将对所有符合命名规则的测试文件进行调用。

总结

在本文中，我们简单讲解了 Angular 环境搭建，以及单元测试好处。我们还演示了如何在 Jasmine 中进行单元测试。其中，测试流程大致包含了组件的创建和行为测试，以及测试其状态，输入和输出等。开发者可以根据具体测试场景进行二次开发和调整。

当然，单元测试并不是万能的，中国的谚语说得好：用钥匙打开的锁不一定适合用锤子打开。但是它可以极大地提高软件整体质量，并降低框架不合理导致的错误。我们提倡合理利用单元测试，成熟软件需要专业的工具支持。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65470de57d4982a6eb170613