Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

127
Vistas
Test promise inside dynamic import in Angular

I have this kind of code:

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();
  });
}

So the question is, How do I mock this promise domToImage.toPng? Is there a solution so the test can continue its execution and resolve the promise?

capture of the coverage

Thanks in advance Isma

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You have to mock module.default:

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

And a mock calling reject in error tests. Note: If you cant mock module.default directly, try spyOnProperty

about 4 years ago · Juan Pablo Isaza Denunciar

0

I remember I had a similar problem and I couldn't spy on the import to mock it.

What I did to make the test happy was I moved it to its own method and I spied on that method.

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');
}

The first fixture.detectChanges() is when ngOnInit() is called, so we have to mock before that.

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();
  });
}

The above should hopefully do the trick and get you started.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda