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

前言

在开发 Web 应用时，我们经常需要进行单元测试来确保代码的正确性和可靠性。在 Angular 中，我们可以使用 Jest 来进行单元测试和快照测试。本文将介绍 Jest 的基本使用方法，并提供一些示例代码来帮助你更好地理解。

Jest 简介

Jest 是 Facebook 开源的一款 JavaScript 测试框架，它提供了丰富的 API 和插件，支持单元测试、集成测试和快照测试等多种测试方式。Jest 还内置了代码覆盖率报告和自动化测试等功能，使得测试变得更加简单和高效。

安装 Jest

在 Angular 项目中使用 Jest，需要先安装 Jest 和相关的依赖。可以使用以下命令进行安装：

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

其中，jest 是 Jest 框架本身，@types/jest 是 Jest 的 TypeScript 类型定义文件，jest-preset-angular 是 Jest 针对 Angular 的预设配置。

编写测试用例

在 Angular 项目中，我们可以在 src 目录下创建一个名为 __tests__ 的文件夹，用来存放测试用例。在这个文件夹下，我们可以创建一个名为 app.spec.ts 的文件，用来编写针对 app.component.ts 组件的测试用例。

示例代码如下：

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

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<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 render title', () => {
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.title').textContent).toContain('app works!');
  });
});

在这个测试用例中，我们首先导入了 TestBed 和 ComponentFixture，这两个类是 Angular 提供的测试工具，用来创建组件实例和进行测试。

然后，我们使用 describe 函数来定义一个测试套件，名称为 AppComponent，表示我们要对 AppComponent 这个组件进行测试。

在 beforeEach 函数中，我们使用 TestBed.configureTestingModule 方法来配置测试环境，声明要使用的组件为 AppComponent。

在第二个 beforeEach 中，我们使用 TestBed.createComponent 方法来创建 AppComponent 的实例，并将其赋值给 component 变量。然后，我们调用 fixture.detectChanges 方法来触发变化检测。

在第一个测试用例中，我们使用 expect 函数来判断 component 是否为真值，即组件实例是否创建成功。

在第二个测试用例中，我们使用 expect 函数来判断组件模板中是否包含 title 类名，并且其文本内容是否包含 app works!。

运行测试

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

npm test

这个命令会自动运行所有的测试用例，并输出测试结果。如果所有测试用例都通过，控制台会输出 Test Suites: X passed, X total，表示所有测试用例都通过了。

快照测试

除了单元测试之外，Jest 还支持快照测试。快照测试是一种测试方式，它会将组件的渲染结果保存到一个文件中，然后在后续的测试中与新的渲染结果进行比较，以检测组件是否发生了变化。

在 Angular 中，我们可以使用 jest-preset-angular 插件来进行快照测试。这个插件会自动为我们配置好快照测试的相关设置，并提供了一些 API 来方便我们进行快照测试。

示例代码如下：

// javascriptcn.com 代码示例
import { TestBed } from '@angular/core/testing';
import { AppComponent } from '../app.component';
import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';

describe('AppComponent', () => {
  let spectator: Spectator<AppComponent>;
  const createComponent = createComponentFactory({
    component: AppComponent,
    detectChanges: false,
  });

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent],
    });
    spectator = createComponent();
  });

  it('should match snapshot', () => {
    expect(spectator.fixture).toMatchSnapshot();
  });
});

在这个测试用例中，我们使用了 @ngneat/spectator/jest 插件提供的 createComponentFactory 函数来创建组件实例，并将其赋值给 spectator 变量。然后，我们使用 expect 函数来判断 spectator.fixture 是否与之前保存的快照文件匹配。

总结

本文介绍了在 Angular 中使用 Jest 进行单元测试和快照测试的基本方法和技巧。通过本文的学习，相信你已经对 Jest 的使用有了更加深入的了解，能够更加高效地进行测试工作。

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