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

前言

针对 Angular 应用，使用 Jest 进行单元测试是一个非常好的选择。Jest 是一种简单且强大的 JavaScript 测试框架，支持单元测试、集成测试和快照测试。在这篇文章中，我们将详细介绍在 Angular 应用中如何使用 Jest 进行单元测试。

安装

首先，我们需要对 Jest 进行安装。在项目中执行以下命令：

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

配置

接下来，我们需要在项目中添加 Jest 配置文件。在项目根目录下创建一个文件 jest.config.js ，添加以下内容：

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

其中，preset 会告诉 Jest，我们使用的是 Angular 项目预设的配置。roots 是指测试文件所在的目录，testMatch 是用来匹配测试文件。在 setupFilesAfterEnv 中，我们可以写一些在运行测试前需要进行的操作，如全局的 mock，或是全局的一些设置。

编写测试

接下来，我们需要编写一些测试用例。在编写测试用例之前，我们需要修改以下文件。

修改 tsconfig.json 对测试文件的支持

在 tsconfig.json 文件中添加以下配置：

{
  "compilerOptions": {
    "types": ["jest", "node"]
  },
  "include": ["src/**/*.ts", "src/**/*.spec.ts"]
}

其中，types 中添加了 jest ，这是为了在测试文件中可以更加方便地使用 Jest ，include 中添加了 **/*.spec.ts ，这是为了让 TypeScript 在编译时也将测试文件一起编译，否则测试文件中就无法使用项目中的代码了。

修改 karma.conf.js 文件

在 karma.conf.js 文件中，我们需要注释掉对测试文件的引入。在 karma.conf.js 文件的 files 数组中添加以下代码：

    // { pattern: './src/test.ts', watched: false},
    // {
    //   pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
    //   watched: false
    // }

编写测试用例

接下来，我们来编写一个组件测试用例。

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

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

  beforeEach(async(() => {
    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 = fixture.nativeElement.querySelector('h1');
    expect(title.textContent).toContain('Title');
  });

  it('should change title', () => {
    component.title = 'New Title';
    fixture.detectChanges();
    const title = fixture.nativeElement.querySelector('h1');
    expect(title.textContent).toContain('New Title');
  });
});

该测试用例会自动创建一个组件实例，并测试：

组件是否创建成功
组件的标题是否正确显示
组件的标题是否可以成功更改

我们可以使用 $ ng test 命令执行这个测试用例。

总结

在本篇文章中，我们介绍了如何在 Angular 应用中使用 Jest 进行单元测试的步骤和方法。当然，我们只是介绍了其中一部分，更多的功能和特性请查看 Jest 官方文档。希望这篇文章能够帮助你更好地学习 Jest 和 Angular 单元测试。

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