How to Dependency Inject an Object with Cypress Component Testing

Issue

When a component requires, for example, a logging service object that is dependency injected (DI), how is that component tested using Cypress Component testing?

Consider:

@Component({
  selector: 'app-not-authorized',
  templateUrl: './not-authorized.component.html',
  styleUrls: ['./not-authorized.component.scss']
})
export class NotAuthorizedComponent implements OnInit  {
  constructor(private logger: LoggingService) { }

  ngOnInit() {
    this.logAccess();
  }
...
}

How is Cypress accommodating DI parameters/objects for component creation?

For completeness, here is the error we get when running our component test.

1) NotAuthorizedComponent
       mount:
     NullInjectorError: R3InjectorError(DynamicTestModule)[LoggingService -> LoggingService]:
  NullInjectorError: No provider for LoggingService!
      at NullInjector.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:13946:27)
      at R3Injector.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:14113:33)
      at R3Injector.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:14113:33)
      at NgModuleRef.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:24641:33)
      at Object.get (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:24318:35)
      at lookupTokenUsingModuleInjector (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:6183:39)
      at getOrCreateInjectable (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:6295:12)
      at ɵɵdirectiveInject (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:17219:12)
      at NodeInjectorFactory.NotAuthorizedComponent_Factory [as factory] (ng:///NotAuthorizedComponent/ɵfac.js:4:50)
      at getNodeInjectable (http://localhost:8080/__cypress/src/default-node_modules_tslib_tslib_es6_js-node_modules_angular_core_fesm2015_core_mjs.js:6390:44)

Solution

You can inject dependencies by adding them to the providers array in MountConfig. Please refer to this article.

Answered By - Allan Juan