Angular 9 new unit test error: "unsafe value used in a resource URL context"

Question

自从将我的 Angular 应用程序从版本 8 升级到版本 9 后，我在运行我的 Jest 单元测试时出现了一个新错误：

unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

我正在测试的组件使用 DomSanitizer：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

export class ExampleComponent implements OnInit {

  @Input() path: string;
  url: SafeResourceUrl;

  constructor(
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(){
    this.url = this.sanitizer.bypassSecurityTrustResourceUrl( this.path );
  }

}

并且此 url 在 iframe 上使用：

<iframe [src]="url" />

我将 Jest 与 Angular 9 一起使用，这发生在拍摄快照时。

我的测试（我试过模拟它和不模拟它）：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ExampleComponent ],
      providers: [
        {
          provide: DomSanitizer,
          useValue: {
            bypassSecurityTrustResourceUrl: () => ''
          }
        }
      ]
    })
    .compileComponents();
  }));
  beforeEach(() => {
    fixture = TestBed.createComponent(ExampleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should render', () => {
    expect(fixture).toMatchSnapshot();
  });

有人知道我该如何解决这个问题吗？

Answer 1

测试中没有组件生命周期。您必须自己调用组件循环方法。

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

但是因为你有一个可能会变异的 @Input，我会将逻辑从 ngOnInit 移动到 ngOnChanges 这样你的组件就可以反映动态绑定的变化 - 现在它只是一发。

Angular 9 new unit test error: "unsafe value used in a resource URL context"

Angular 9 new unit test error: "unsafe value used in a resource URL context"

jestjs

angular

angular-dom-sanitizer