Angular/NgRx Unit testing can't create TestBed

Question

While developing a component that requires and NgRx store the testing suite fails and I get a message stating that...

'Can't resolve all parameters for NavComponent: (?).'

  ● AppComponent › should create the app

    Can't resolve all parameters for NavComponent: (?).

      at syntaxError (../packages/compiler/src/util.ts:100:17)
      at CompileMetadataResolver._getDependenciesMetadata (../packages/compiler/src/metadata_resolver.ts:957:27)
      at CompileMetadataResolver._getTypeMetadata (../packages/compiler/src/metadata_resolver.ts:836:20)
      at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../packages/compiler/src/metadata_resolver.ts:377:18)
      at CompileMetadataResolver.loadDirectiveMetadata (../packages/compiler/src/metadata_resolver.ts:224:11)
      at ../packages/compiler/src/jit/compiler.ts:135:36
          at Array.forEach (<anonymous>)
      at ../packages/compiler/src/jit/compiler.ts:133:65
          at Array.forEach (<anonymous>)
      at JitCompiler._loadModules (../packages/compiler/src/jit/compiler.ts:130:71)
      at JitCompiler._compileModuleAndAllComponents (../packages/compiler/src/jit/compiler.ts:115: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:57:27)
      at TestBedViewEngine.compileComponents (../../packages/core/testing/src/test_bed.ts:362:27)
      at Function.TestBedViewEngine.compileComponents (../../packages/core/testing/src/test_bed.ts:160:66)
      at src/app/app.component.spec.ts:32:8
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:391:26)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:129:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:390:52)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/dist/zone.js:150:43)

My test bed config

describe('AppComponent', () => {
  let router: Router;
  let location: Location;
  let store: MockStore<ApplicationState>;
  const initialState: ApplicationState = {
    root: {
      user: null,
      tabs: null
    }
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes(routes), MaterialsModule],
      declarations: [AppComponent, NavComponent],
      providers: [provideMockStore({ initialState })]
    }).compileComponents();
    router = TestBed.get(Router);
    location = TestBed.get(Location);
    store = TestBed.get<Store<ApplicationState>>(Store);

    router.initialNavigation();
  });

The Component

@Component({
  selector: 'af3-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
  tabs$: Observable<NavTab[]>;
  constructor(private store: Store<fromStore.ApplicationState>) {}

  ngOnInit() {
    // this.tabs$ = this.store.pipe(select(fromStore.selectTabsForUserState));
  }
}

I have also tried to import StoreModule, but according to ngrx.io, that isn't necessary as provideMockStore() setups up all the providers necessary with configuring the reducers.

The error and the stack trace aren't very helpful.

Thanks in advance for any help.

UPDATE: it turns out that the test bed can't inject ANY referenced services. I created a test service and tried to run the test, but received the same errors when running the tests.

UPDATE: NGRX is definitely not the issue. To add some more context I have been trying to track this issue down. Currently no providers can be resolved. I replace Jasmine with Jest and it looks like Jest may be the issue.

Welcome to SO, I don't think that NGRX is the problem there. Maybe do you have missing polyfile — Wandrille
@Wandrille. NGRX is definitely not the issue. To add some more context I have been trying to track this issue down. Currently no providers can be resolved. I replace Jasmine with Jest and it looks like Jest may be the issue. — August Duet

August Duet August Duet · Accepted Answer · 2019-11-06T21:12:10

Adding emitDecoratorMetadata: true to tsconfig.spec.json was the solution for me.

Reference: https://github.com/thymikee/jest-preset-angular/issues/288

Angular/NgRx Unit testing can't create TestBed

1 Answers