Question

以角度运行茉莉花单元测试时，我遇到了错误

错误：

TypeError：无法读取null的属性“ scroll” 在在BoxComponent.ngAfterViewInit（http://localhost:9876/_karma_webpack_/src/app/components/box/box.component.ts:289:14）

// component 

ngAfterViewInit() {
    document.querySelector('.form-div .form-box').scroll(0, 0);
  }
  
//unit test

it('should call ngAfterViewInit', () => {
    component.ngAfterViewInit();
    spyOn(document.querySelector('.form-div .form-box'), 'scroll').withArgs(0, 0).and.callThrough();
    expect(document.querySelector('.form-div .form-box').scroll).toHaveBeenCalledWith(0, 0);
    expect(component.ngAfterViewInit).toBeTruthy();
  });
  
  
// Error

TypeError: Cannot read property 'scroll' of null
    at <Jasmine>
    at BoxComponent.ngAfterViewInit (http://localhost:9876/_karma_webpack_/src/app/components/box/box.component.ts:289:14)

Answer 1

您应该使用$ document而不是document，然后可以在测试中模拟它。您可以参考：Angular js unit test mock document

Answer 2

我尝试了下面的代码，并且有效

el: ElementRef

 ngAfterViewInit() {
    if (this.el && this.el.nativeElement && this.el.nativeElement.parentElement) {
      this.el.nativeElement.parentElement.scrollTop = 0;
    }
  }

角茉莉花TypeError：无法读取null的属性'scroll'

2 个答案: