如何使用jest和angular对商店onInit进行单元测试_如何使用jest和酶对reduxsauce进行单元测试？_使用jest和酶对useReducer钩子进行单元测试 - 腾讯云开发者社区

要对Angular组件的ngOnInit生命周期钩子进行单元测试，您需要使用Jest作为测试运行器，并结合Angular的测试工具，如@angular/core/testing和@angular/compiler/testing

安装依赖项

确保您的项目中已经安装了Jest和Angular测试工具。如果没有，请运行以下命令安装：

npm install --save-dev jest @types/jest ts-jest @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic @angular/forms @angular/router @angular/testing

配置Jest

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

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  roots: ['<rootDir>/src/app'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/app/$1',
  },
};

创建测试文件

在组件所在的目录下，创建一个与组件同名的测试文件，例如store.component.spec.ts。

编写测试用例

在测试文件中，首先导入必要的模块，然后编写针对ngOnInit的测试用例。以下是一个简单的示例：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StoreComponent } from './store.component';
import { of } from 'rxjs';

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

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

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

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

  it('should call ngOnInit and set initial values', () => {
    spyOn(component, 'ngOnInit').and.callThrough();

    component.ngOnInit();

    expect(component.ngOnInit).toHaveBeenCalled();
    expect(component.someProperty).toEqual(expectedValue);
  });
});

在这个示例中，我们首先导入了必要的模块，并创建了一个StoreComponent实例。然后，我们编写了一个测试用例，用于检查ngOnInit是否被调用，并验证组件的一些属性是否已设置为预期的初始值。