Angular: How to debug injection error in unit tests

Question

I sometimes get an injection error in unit tests which looks like below and that gives me no idea which dependency exactly I should fix. I tried to play with providers I have in TestBed.configureTestingModule config but that didn't help. Anyone have ideas how I can proceed with investigating the issue?

✖ should create
  Chrome 57.0.2987 (Mac OS X 10.11.0)
Error
    at injectionError (webpack:///~/@angular/core/@angular/core.es5.js:1232:21 <- src/test.ts:1992:86) [angular]
    at noProviderError (webpack:///~/@angular/core/@angular/core.es5.js:1270:0 <- src/test.ts:2030:12) [angular]
    at ReflectiveInjector_.Array.concat.ReflectiveInjector_._throwOrNull (webpack:///~/@angular/core/@angular/core.es5.js:2772:0 <- src/test.ts:3532:19) [angular]
    at ReflectiveInjector_.Array.concat.ReflectiveInjector_._getByKeyDefault (webpack:///~/@angular/core/@angular/core.es5.js:2811:0 <- src/test.ts:3571:25) [angular]
    at ReflectiveInjector_.Array.concat.ReflectiveInjector_._getByKey (webpack:///~/@angular/core/@angular/core.es5.js:2743:0 <- src/test.ts:3503:25) [angular]
    at ReflectiveInjector_.Array.concat.ReflectiveInjector_.get (webpack:///~/@angular/core/@angular/core.es5.js:2612:0 <- src/test.ts:3372:21) [angular]
    at DynamicTestModuleInjector.Array.concat.NgModuleInjector.get (webpack:///~/@angular/core/@angular/core.es5.js:3577:0 <- src/test.ts:4337:52) [angular]
    at resolveDep (webpack:///~/@angular/core/@angular/core.es5.js:10981:0 <- src/test.ts:11741:45) [angular]
    at createClass (webpack:///~/@angular/core/@angular/core.es5.js:10849:0 <- src/test.ts:11609:32) [angular]
    at createDirectiveInstance (webpack:///~/@angular/core/@angular/core.es5.js:10675:21 <- src/test.ts:11435:37) [angular]
    at createViewNodes (webpack:///~/@angular/core/@angular/core.es5.js:12024:33 <- src/test.ts:12784:49) [angular]
    at callViewAction (webpack:///~/@angular/core/@angular/core.es5.js:12394:0 <- src/test.ts:13154:13) [angular]
    at execComponentViewsAction (webpack:///~/@angular/core/@angular/core.es5.js:12333:0 <- src/test.ts:13093:13) [angular]
    at createViewNodes (webpack:///~/@angular/core/@angular/core.es5.js:12051:0 <- src/test.ts:12811:5) [angular]

I'm using: angular: 4.0.0 ng-cli: 1.0.0

Mikhail Romanov · Accepted Answer · 2017-04-26 04:52:12Z

1

Found one possible way. The stack trace shows there is a resolveDep method which causes error:

at resolveDep (webpack:///~/@angular/core/@angular/core.es5.js:10982:0 <- src/test.ts:11742:45) [angular]

so I put a break point inside this method:

debugger;
return startView.root.ngModule.injector.get(depDef.token, notFoundValue);

and refreshed Karma browser page as described in docs: https://angular.io/docs/ts/latest/testing/#!#test-debugging

I could see then what dependencies are required checking devDep variable:

answered Apr 26, 2017 at 4:52

Mikhail Romanov

1,6321 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jürgen 'Kashban' Wahlmann Over a year ago

Good find! Now I really wonder why on earth the most vital information is not mentioned in the error message at all... You can get the same information from the line in module.ngfactory.js: Object.defineProperty(DynamicTestModuleInjector.prototype, '_SqliteProvider_67', { get: function() { var self = this; if ((self.__SqliteProvider_67 == null)) { (self.__SqliteProvider_67 = new jit_SqliteProvider49(self.parent.get(jit_SQLite50))); } return self.__SqliteProvider_67; }}); I'm on Angular 4.0.2.

Collectives™ on Stack Overflow

Angular: How to debug injection error in unit tests

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related