Reverse proxy configuration for Karma during Angular testing

Question

My application makes calls to a backend web service. During development I configure reverse proxy for the Angular CLI server and everything works fine.

ng serve --proxy-config proxy.config.json

I need to do the same for Karma during unit testing. I add this to karma.conf.js.

proxies: {
  "/books":"http://localhost:3000/",
  "/books/*":"http://localhost:3000/",
}

None of this works. My calls always get 404. If, however, I configure a full URL, it works.

proxies: {
  "/books/167":"http://localhost:3000/books/167"
}

How can I properly configure reverse proxy using wildcard?

Answer 1

You should not use backend in the unit test. As the name shows it is about testing in units. The dependencies of the unit you test (e.g. service or component) should be mocked. This way real http service won't be called, only a mock (e.g. Observable) with the same functionality, so only the unit will be tested and the test won't fail because of the dependency.

The proxy is only needed in the e2e test as it tests the application as a whole. The e2e tests inherit the --proxy-config option from the serve script.

Examples:

• MockBackend for test
• Testing guide