使用 Jest 进行 Angular 的集成测试

前端开发中，集成测试是非常重要的一个环节。它可以确保我们开发的代码在实际运行环境中能够正常工作，同时也能够提高代码的健壮性和可靠性。本篇文章将介绍如何使用 Jest 进行 Angular 的集成测试，希望能对广大前端开发者有所帮助。

Jest 简介

Jest 是 Facebook 开源的一个 JavaScript 测试框架，它集成了断言库、测试运行器等多种功能，提供了一个简洁的 API 来编写测试用例。Jest 的特点是快速、易学易用，并且与 React、Angular、Vue 等主流前端框架无缝配合。因此，使用 Jest 进行 Angular 的集成测试是非常合适的选择。

集成测试准备工作

在使用 Jest 进行 Angular 的集成测试之前，需要进行一些准备工作。

安装 Jest

使用 npm 安装 Jest：

npm install --save-dev jest @types/jest

配置 Jest

在项目根目录下创建 jest.config.js 文件，配置 Jest 运行参数。例如，配置 Angular 项目中的测试文件和测试覆盖率输出：

module.exports = {
  roots: ['<rootDir>/src'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  coverageReporters: ['html'],
};

修改 package.json

将 Jest 配置加入到 package.json 文件中：

// javascriptcn.com 代码示例
{
  "name": "my-app",
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": ["<rootDir>/src/setup-jest.ts"]
  }
}

其中，preset 指定了使用 Jest 集成 Angular 的预设，setupFilesAfterEnv 指定了 Jest 运行时的配置文件。

编写测试用例

在 src 目录下创建 app.component.spec.ts 文件，编写测试用例：

// javascriptcn.com 代码示例
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';

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

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

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

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

  it(`should have as title 'my-app'`, () => {
    expect(component.title).toEqual('my-app');
  });

  it('should render title', () => {
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('.content span')?.textContent)?.toContain(
      'my-app app is running!'
    );
  });
});

使用 Jest 进行集成测试

完成了以上准备工作之后，就可以使用 Jest 进行 Angular 的集成测试了。执行以下命令：

npm run test

Jest 将输出测试结果和测试覆盖率报告。

总结

本篇文章介绍了如何使用 Jest 进行 Angular 的集成测试，并讲解了相关的准备工作和使用技巧。希望这篇文章对广大前端开发者有所帮助。

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