how to fix 404 errors for webserver during karma unit testing Angular


Angular test webserver 404 errors

In this tutorial, You are going to learn how to fix webserver 404 not found errors in testing angular components or directives. This includes solution for 404 error for loading an assets files like json and images during running karma runner.

2021 01:06:33.123:WARN [web-server]: 404: /assets/arrow.png 2021 01:06:33.123:WARN [web-server]: 404: /assets/down.png

Suppose you have a component which uses png or any image files, You will get an error while unit testing an component.

Generally, When ng test command issued, It runs web server and execute unit testing running ng serve and ng test are different environment. So you have lo load assets during testing components.

I have a component app.component.ts

<div>
  <img src="assets/images/logo.png" />
</div>
Running ng test gives an error
  it('should render image', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('img')).toBeDefined();
  });
});

You will get error something like this WARN [web-server]: 404: /assets/images/logo.png

The error tells that image is not finding in unit testing with karma and angular unit testing

What karma do while running ng test command

  • Karma compiles all spec test files
  • Create a request html page which contains all static files javascript images and json
  • Starts web server to serve request from unit testing code
  • Webserver loads all component code as well as static assets
  • Static assets should be available to load properly-

There are multiple ways to fix 404 errors in image loading.

one way,

Create a images files required for component locally which is not recommended to copy or create a image for testing only

Another way is to configure karma.config.js file

  • add files an array with assets pattern in karma configuration file - karma.config.
 files: [
    { pattern: 'assets/images/*.*', watched: true, included: true, served: true },

],

files section of these configuration contains pattern watched included and served values

  • add proxies for asset folder
proxies: {
    "/assets/": "/app/assets/"
}

in proxies attribute, First value pointing to original request that is coming second value is an karma runner serves the files for assets

We are running test from src folder, we have to provide path stars from app folder for karma runner.

This means whenever request contains assets path, it serves the files from app/assets/ folder.

Conclusion

You learned how to fix karma webserver 404 errors in Angular unit testing for static files like images,json files.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.