how to fix 404 warnings for images during karma unit testing

by

That is because you need to configurate karma to load then serve them when requested 😉

In your karma.conf.js file you should already have defined files and/or patterns like :

// list of files / patterns to load in the browser
files : [
  {pattern: 'app/lib/angular.js', watched: true, included: true, served: true},
  {pattern: 'app/lib/angular-*.js', watched: true, included: true, served: true},
  {pattern: 'app/lib/**/*.js', watched: true, included: true, served: true},
  {pattern: 'app/js/**/*.js', watched: true, included: true, served: true},
  // add the line below with the correct path pattern for your case
  {pattern: 'path/to/**/*.png', watched: false, included: false, served: true},
  // important: notice that "included" must be false to avoid errors
  // otherwise Karma will include them as scripts
  {pattern: 'test/lib/**/*.js', watched: true, included: true, served: true},
  {pattern: 'test/unit/**/*.js', watched: true, included: true, served: true},
],

// list of files to exclude
exclude: [

],

// ...

You can have a look here for more info 🙂

EDIT : If you use a nodejs web-server to run your app, you can add this to karma.conf.js : 

proxies: {
  '/path/to/img/': 'http://localhost:8000/path/to/img/'
},

EDIT2 : If you don’t use or want to use another server you can define a local proxy but as Karma doesn’t provide access to port in use, dynamically, if karma starts on another port than 9876 (default), you will still get those annoying 404…

proxies =  {
  '/images/': '/base/images/'
};

Related issue : https://github.com/karma-runner/karma/issues/872

More Related Contents:

  1. jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL
  2. AngularJS routing 404 error with HTML5 mode
  3. How do I mock a service that returns promise in AngularJS Jasmine unit test?
  4. Can Protractor and Karma be used together?
  5. Angular ui router unit testing (states to urls)
  6. UI-router interfers with $httpbackend unit test, angular js
  7. Angular 1.6.0: “Possibly unhandled rejection” error [duplicate]
  8. How to Unit Test Isolated Scope Directive in AngularJS
  9. Mocking and Stubbing with protractor
  10. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  11. Clicking a button within a form causes page refresh
  12. How to dynamically change header based on AngularJS partial view?
  13. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  14. Using Jquery Datatable with AngularJs
  15. How to debug angular protractor tests in WebStorm
  16. What’s the difference/incompatibility between ng-model and ng-value?
  17. Angular JS custom delimiter
  18. Where to put model data and behaviour? [tl; dr; Use Services]
  19. Using Inline Templates in AngularJS
  20. How can I listen for a click-and-hold in AngularJS?
  21. Pass Angular scope variable to Javascript
  22. Extending AngularJs Directive
  23. Angular UI-Router more Optional Parameters in one State
  24. How can I use an AngularJS filter to format a number to have leading zeros?
  25. How to achieve that “ui-sref” be conditionally executed?
  26. Ionic Framework: $scope is undefined in simple alert
  27. Set-Cookie in HTTP header is ignored with AngularJS
  28. AngularJS Uploading An Image With ng-upload
  29. Make angular.forEach wait for promise after going to next object
  30. Angular.js: Is .value() the proper way to set app wide constant and how to retrieve it in a controller

Leave a Comment