测试承诺内动态导入角

Question

我有这样的代码：

component.ts

async ngOnInit() {
   import('dom-to-image').then(module => {
      const domToImage = module.default;
      const node = document.getElementById('some-id');
      domToImage.toPng(node).then(dataUrl => {
          // The test is not getting over here
      }).catch(() => {});
   });
}

component.spec.ts

describe('SomeComponent', () => {
  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
           ....
      }).compileComponents();
      fixture = TestBed.createComponent(SomeComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    })
  )

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

所以问题是，我如何嘲弄这个承诺domToImage.toPng？是否有解决方案使测试能够继续执行并解决承诺？

​

​

提前谢谢伊斯玛

Answer 1

您必须模拟module.default：

module.default = {
    toPng: () => new Promise((resolve, reject) => {resolve('myExpectedResponseData')})
};

以及错误测试中的模拟调用拒绝。注意:如果不能直接模拟module.default，请尝试spyOnProperty

Answer 2

我记得我也遇到了类似的问题，我无法在import上进行间谍活动来嘲笑它。

为了让测试开心，我把它移到了它自己的方法上，我观察到了这个方法。

async ngOnInit() {
   importDomToImage().then(module => {
      const domToImage = module.default;
      const node = document.getElementById('some-id');
      domToImage.toPng(node).then(dataUrl => {
          // The test is not getting over here
      }).catch(() => {});
   });
}

importDomToImage(): Promise<any> { // can make any more specific
  return import('dom-to-image');
}

第一个fixture.detectChanges()是在调用ngOnInit()时，所以我们必须在此之前进行模拟。

describe('SomeComponent', () => {
  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
           ....
      }).compileComponents();
      fixture = TestBed.createComponent(SomeComponent);
      component = fixture.componentInstance;
      // mock here
      spyOn(component, 'importDomToImage').and.returnValue(Promise.resolve({
        default: {
           toPng: (arg) => Promise.resolve('abc'), // dataUrl will be abc
        }
      }));
      fixture.detectChanges();
    })
  )

  it('should create', async () => {
    // await fixture.whenStable() to resolve all promises
    await fixture.whenStable();
    expect(component).toBeTruthy();
  });
}

希望上面的这些都能让你开始工作。