在 Jest 测试框架中如何测试 Angular 组件-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一个流行的 JavaScript 测试框架，能够帮助开发人员在编写代码时实现单元测试、集成测试等。当你开始创建 Angular 应用时，你可能想要知道如何在 Jest 框架中测试你的组件。在本文中，我们将向您展示如何使用 Jest 进行 Angular 组件测试。

安装 Jest

首先，您需要在项目中安装 Jest。可以使用 npm 或 yarn 安装 Jest。

npm install jest -D

或者

yarn add jest -D

配置 Jest

一旦您安装了 Jest，您需要配置它以在 Angular 应用程序中使用它。创建一个 jest.config.json 文件并将其放在项目的根目录下，然后添加以下内容：

// javascriptcn.com 代码示例
{
  "preset": "jest-preset-angular",
  "setupFilesAfterEnv": [
    "<rootDir>/setup-jest.ts"
  ],
  "testPathIgnorePatterns": [
    "<rootDir>/node_modules/",
    "<rootDir>/dist/"
  ],
  "moduleNameMapper": {
    "@app/(.*)": "<rootDir>/src/app/$1"
  },
  "collectCoverage": true
}

此配置文件将使用 jest-preset-angular 预设配置您的 Angular 应用程序，并为 Jest 指定各种其他配置选项。

编写测试

一旦您已配置了 Jest，您可以开始编写测试。创建一个名为 *.spec.ts 的文件，将其放在与您要测试的组件相同的目录中，然后添加测试用例。

以 Angular 应用程序中的组件为例，我们可以编写以下测试：

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

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

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

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

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

  it('should render username', () => {
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.username').textContent).toBe('John Doe');
  });
});

上述测试的描述了 UserComponent 组件的创建和渲染行为。在 beforeEach 块中，我们使用 TestBed 创建了一个 CommonModule 并注入我们要测试的组件。然后，我们通过 TestBed.createComponent() 创建了一个 ComponentFixture 实例，通过 component 变量捕获了组件的实例，并调用了 fixture.detectChanges() 让组件完成了 Angular 的变化检测。

接下来，我们编写了两个测试用例。第一个测试用例测试了该组件是否创建成功，第二个测试用例测试了该组件是否正确渲染了用户名。

运行测试

到目前为止，我们已经编写了一个简单的测试用例，现在我们需要运行这个测试用例。通过在终端中运行以下命令，将运行所有的 Jest 测试用例：

npm test

或者

yarn test

如果所有测试都通过，Jest 将反馈一条成功的消息。如果任何一个测试未通过，它将提供详细的错误消息以帮助您调试代码。

总结

本文向您展示了如何在 Jest 框架中对 Angular 组件进行单元测试。测试不仅可以帮助您发现和修复错误，还可以提高代码可维护性和可重用性。无论您是一个有经验的开发人员还是一个初学者，测试都是促使您的代码更加健壮和高效的关键组成部分。

示例代码见以下链接:

https://github.com/Linqianyuan/blog_demo/tree/master/jest-angular-testing

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