All Angular dependencies need to be forwardRefs or Jest Breaks

Question

I'm having a somewhat annoying problem with Jest and Angular.

I have absolutely no idea why, but every single time I'm trying to inject even the simplest of service, it's causing jest to complain:

FAIL apps/simplescrum/src/app/app.component.spec.ts
  ● AppComponent › should create the app

    Can't resolve all parameters for HeaderComponent: (?, [object Object]).

      at syntaxError (../../../packages/compiler/src/util.ts:108:17)
      at CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:991:27)
      at CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:870:20)
      at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:375:18)
      at CompileMetadataResolver.loadDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:226:11)
      at ../../../packages/compiler/src/jit/compiler.ts:137:36
          at Array.forEach (<anonymous>)
      at ../../../packages/compiler/src/jit/compiler.ts:135:65
          at Array.forEach (<anonymous>)
      at JitCompiler._loadModules (../../../packages/compiler/src/jit/compiler.ts:132:71)
      at JitCompiler._compileModuleAndAllComponents (../../../packages/compiler/src/jit/compiler.ts:117:32)
      at JitCompiler.compileModuleAndAllComponentsAsync (../../../packages/compiler/src/jit/compiler.ts:69:33)
      at CompilerImpl.compileModuleAndAllComponentsAsync (../../../packages/platform-browser-dynamic/src/compiler_factory.ts:69:27)
      at TestingCompilerImpl.compileModuleAndAllComponentsAsync (../../../../packages/platform-browser-dynamic/testing/src/compiler_factory.ts:59:27)
      at TestBedViewEngine.compileComponents (../../../../packages/core/testing/src/test_bed.ts:375:27)
      at Function.TestBedViewEngine.compileComponents (../../../../packages/core/testing/src/test_bed.ts:159:25)
      at src/app/app.component.spec.ts:20:8
      at ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:386:30)
      at AsyncTestZoneSpec.onInvoke (../../node_modules/zone.js/dist/async-test.js:102:47)
      at ProxyZoneSpec.onInvoke (../../node_modules/zone.js/dist/proxy.js:114:43)
      at ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:385:36)
      at Zone.runGuarded (../../node_modules/zone.js/dist/zone.js:154:51)
      at runInTestZone (../../node_modules/zone.js/dist/async-test.js:224:33)
      at ../../node_modules/zone.js/dist/async-test.js:162:21
      at ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:386:30)
      at ProxyZoneSpec.onInvoke (../../node_modules/zone.js/dist/proxy.js:117:43)
      at ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:385:36)
      at Zone.run (../../node_modules/zone.js/dist/zone.js:143:47)

When my dependency injection looks like this:

constructor(private appStateService: AppStateService,
            public breakpointService: BreakpointService) {
}

both of these services are @Injectable({providedIn: 'root'})

It also occurs happens when loading services from angular material which tells me it's possibly more my jest config than my code.

constructor(private breakpointObserver: BreakpointObserver) {
}

Interestingly, the problems don't happen when I inject the services in as forwardRefs

constructor(@Inject(forwardRef(() => BreakpointObserver)) private breakpointObserver: BreakpointObserver) {
}

Anyone got any thoughts?

Code repo can be found here https://github.com/geometricpanda/simple-scrum

This applies to any TS setup where Angular DI is used. It's either `emitDecoratorMetadata` option, or explicit use of `Inject(BreakpointObserver)` (no need for forwardRef). — Estus Flask, Jun 21 '20 at 10:41

score 2 · Answer 1 · answered Jun 20 '20 at 16:58

2

Found the answer here: https://github.com/thymikee/jest-preset-angular/issues/288

tsconfig.spec.json

   "compilerOptions": {
+    "emitDecoratorMetadata": true,
     "outDir": "./out-tsc/spec",

answered Jun 20 '20 at 16:58

Jim Drury

79
1
4

All Angular dependencies need to be forwardRefs or Jest Breaks

1 Answers1