如何在 Angular 应用中使用 Jest 进行单元测试-JavaScript中文网-JavaScript教程资源分享门户

在现代的前端开发中，单元测试是必不可少的一部分。它可以帮助我们及时发现和修复代码中的问题，提高代码质量和可维护性。在 Angular 应用中，我们可以使用 Jest 进行单元测试。本文将介绍如何在 Angular 应用中使用 Jest 进行单元测试，并提供示例代码。

为什么选择 Jest

在 Angular 应用中进行单元测试时，我们可以使用多种测试框架，如 Karma、Jasmine 等。那么为什么选择 Jest 呢？

首先，Jest 是一个快速、简单的 JavaScript 测试框架，它提供了丰富的功能和易于使用的 API。其次，Jest 可以很好地与 Angular 应用集成，可以轻松地进行组件、服务等的测试。最后，Jest 还提供了快照测试功能，可以方便地测试组件的渲染结果。

安装 Jest

在 Angular 应用中使用 Jest 进行单元测试，需要先安装 Jest。可以使用以下命令进行安装：

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

配置 Jest

安装完 Jest 后，我们需要进行配置。在项目根目录下创建一个 jest.config.js 文件，内容如下：

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['src'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
  collectCoverage: true,
  coverageReporters: ['html']
};

其中，preset 指定了 Jest 的预设，这里使用了 jest-preset-angular，它提供了 Angular 应用测试所需的配置。roots 指定了测试文件所在的目录，这里是 src。testMatch 指定了测试文件的名称，这里是以 .spec.ts 结尾的文件。setupFilesAfterEnv 指定了在每个测试文件执行前需要执行的文件，这里是 setup-jest.ts。collectCoverage 指定了是否收集测试覆盖率，这里设为 true。coverageReporters 指定了生成测试覆盖率报告的格式，这里是 html。

在 src 目录下创建一个 setup-jest.ts 文件，内容如下：

import 'jest-preset-angular';

这个文件会在每个测试文件执行前被执行，用于加载 Jest 的 Angular 预设。

编写测试

在 Angular 应用中，我们可以对组件、服务、指令等进行单元测试。以下是一个组件的测试示例：

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

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

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

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

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

  it('should render title', () => {
    const title = 'Hello, Jest!';
    component.title = title;
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain(title);
  });
});

这个测试文件包含了两个测试用例。在 beforeEach 中，我们使用 TestBed.configureTestingModule 创建了一个测试模块，并声明了要测试的组件。然后在第二个 beforeEach 中，我们使用 TestBed.createComponent 创建了组件实例，并调用 fixture.detectChanges 更新组件的视图。在第一个测试用例中，我们测试了组件是否成功创建。在第二个测试用例中，我们测试了组件是否正确渲染了标题。

运行测试

在完成测试的编写后，我们可以使用以下命令来运行测试：

npm run test

这个命令会启动 Jest 并运行所有测试用例。测试结果会显示在命令行中，同时也会生成测试覆盖率报告。

总结

本文介绍了如何在 Angular 应用中使用 Jest 进行单元测试。我们首先选择了 Jest 作为测试框架，并进行了相关配置。然后编写了一个组件的测试示例，介绍了测试用例的编写方式。最后，我们使用 npm run test 命令运行了测试，并查看了测试结果和覆盖率报告。希望本文能够帮助读者更好地进行 Angular 应用的单元测试。

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