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

Learn to fix webserver 404 not found errors in testing angular components or directives.

This post includes a solution for 404 errors for loading 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 that uses png or any image files, You will get an error while unit testing a component.

Generally, When the ng test command is issued, It runs a web server and executes unit testing running ng serve and ng test are different environments. So you have to 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 an error something like this WARN [web-server]: 404: /assets/images/logo.png

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

What does karma do while running the ng test command?

• Karma compiles all spec test files
• Create a request HTML page that contains all static files javascript images and json
• Starts web server to serve a 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 images files required for components locally it is not recommended to copy or create an image for testing only

Another way is to configure the karma.config.js file

• add files and array with assets pattern in the karma configuration file - karma. config.

 files: [
    { pattern: 'assets/images/*.*', watched: true, included: true, served: true },

],

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

• add proxies for the asset folder

proxies: {
    "/assets/": "/app/assets/"
}

in proxies attribute, The first value points to the original request that is coming the second value is a karma runner that serves the files for assets

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

whenever a request contains an assets path, it serves the files from the app/assets/ folder.

Conclusion

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