Angular2 Jasmine Test Image Source

Question

I have a component with an image in template

 <div class="logo"><img src="../images/logo.png"/></div>

When running karma task it throws such error

Uncaught Error: Cannot find module "../images/logo.png"

To mention that app renders the image fine , only karma is complaining.

Any advice will be appreciated.

Answer 1

You could try something like this:

it('should render the logo', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('div.logo>img').src).toContain('/images/logo.png');
}));

Answer 2

Let's assume you are using karma-jasmine to run the test. The files will be hosted on port 9876.

Let's say your img src is ./assets/images/logo.png, then you should expect the src to be http://localhost:9876/assets/images/logo.png instead of just ./assets/images/logo.png