使用 Jest 测试 Angular 应用程序-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一个流行的 JavaScript 测试框架，它提供了一个简单的、快速的、可扩展的方式来编写自动化测试。在本文中，我们将探讨如何使用 Jest 来测试 Angular 应用程序。

准备工作

首先，我们需要创建一个 Angular 应用程序。你可以使用 Angular CLI 来创建一个新的应用程序，如下所示：

ng new my-app

接下来，我们需要安装 Jest 和相关的依赖项。运行以下命令来安装它们：

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

在安装完成后，我们需要配置 Jest。

配置 Jest

在根目录下创建一个 jest.config.js 文件，并添加以下内容：

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

这里我们使用了 jest-preset-angular 预设，它是一个用于 Angular 应用程序的 Jest 预设。在 roots 中指定了测试文件的目录，testMatch 则指定了测试文件的命名规则。setupFilesAfterEnv 指定了在运行测试之前要运行的脚本文件。collectCoverage 和 coverageReporters 用于生成测试覆盖率报告。

接下来，我们需要创建 src/setupJest.ts 文件，并添加以下内容：

import 'jest-preset-angular/setup-jest';

这个文件将加载 jest-preset-angular 的默认配置。

最后，我们需要在 tsconfig.spec.json 文件中添加以下内容：

// javascriptcn.com 代码示例
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node"]
  },
  "files": ["src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

这个文件将确保 Jest 可以正确地编译 TypeScript 代码。

现在我们已经完成了 Jest 的配置，接下来我们可以编写一些测试用例了。

编写测试用例

假设我们有一个简单的组件 HelloComponent，它有一个 name 属性和一个 greet 方法，用于向用户问候。我们可以编写以下测试用例：

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

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

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

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

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

  it('should display greeting message', () => {
    component.name = 'John';
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('p').textContent).toContain('Hello, John!');
  });

  it('should call greet method', () => {
    spyOn(component, 'greet');
    component.name = 'John';
    fixture.detectChanges();
    const button = fixture.nativeElement.querySelector('button');
    button.click();
    expect(component.greet).toHaveBeenCalled();
  });
});

这个测试用例包含了三个测试。第一个测试用例测试组件是否能够成功创建。第二个测试用例测试组件是否能够正确地显示问候信息。第三个测试用例测试组件是否能够正确地响应按钮点击事件。

我们可以通过运行以下命令来运行这些测试：

npx jest

Jest 将运行测试并生成测试覆盖率报告。你可以在浏览器中打开 coverage/lcov-report/index.html 文件来查看报告。

总结

在本文中，我们介绍了如何使用 Jest 测试 Angular 应用程序。我们首先配置了 Jest，然后编写了一些简单的测试用例来测试一个组件。通过使用 Jest，我们可以轻松地自动化测试 Angular 应用程序，并确保代码的质量和可靠性。

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