Jest.js Angular 单元测试误差:1个组件在清理TestBedRender3.destroyActiveFixtures时引发错误

cclgggtu  于 2023-03-06  发布在  Jest
关注(0)|答案(2)|浏览(237)

我正在测试一个已经注入了服务的组件。正如我所看到的,问题是它没有进入ngOnDestroy()。我明确要求测试destroy(),每次测试后我都会收到错误消息"无法取消订阅未定义的"。可能是什么问题?
组件:

//...
    subscription: Subscription;

    constructor(private readonly router: Router,
                private dialog: MatDialog,
                private readonly carService: carService) {
    }

    ngOnInit(): void {
        this.cars$ = this.carService.getCars();
        this.subscription= this.cars$.subscribe(cars=> {
            this.cars= cars;
        });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

试验:

//...
  beforeEach(async () => {
        await TestBed.configureTestingModule({

            providers: [
                {provide: MatDialog, useClass: dialogMock},
                {provide: Router, useValue: routerMock},
                {provide: APP_BASE_HREF, useValue: '/cars'}
            ]
        }).compileComponents();

        component = TestBed.createComponent(CarComponent).componentInstance;
        service = TestBed.inject(CarService);
        service.setProjects([firstCar, secondCar]);
        component.ngOnInit();
    });

    it('test', () => {
        expect(component).toBeInstanceOf(CarComponent);
    });
6za6bjd0

6za6bjd01#

我认为问题是ngOnInit在运行之前没有运行。
你是如何模拟carServicegetCars的?你需要模拟这个服务和getCars方法。看看这个如何模拟依赖于服务的组件:www.example.com网站。https://testing-angular.com/testing-components-depending-on-services/#testing-components-depending-on-services.
要快速解除阻塞,可以将ngOnDestroy更改为:

ngOnDestroy() {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

如果订阅存在,则取消订阅。

vltsax25

vltsax252#

问题是ngOnInit改变了你的Typescript文件中汽车的状态,而你没有告诉你的测试去接受这个改变。

component.ngOnInit();

你应该在它的地方放:

let fixture = TestBed.createComponent(CarComponent);
   fixture.detectChanges();

这样,当程序自然地改变汽车的价值时,您的测试文件将拾取它,并且您不必担心有条件地破坏订阅。

相关问题