How to Dependency Inject an Object with Cypress Component Testing

Question

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)

Answer 1

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

---

A code example:

You pass your config when mounting the component in your test as a second argument like so:

Setup your config very similar like a TestBed:

const config: MountConfig<NotAuthorizedComponent> = {
    declarations: [NotAuthorizedComponent, ...],
    providers: [LoggingService, ...],
    imports: [...],
    componentProperties: {
        // you can even access your components public properties and methods here
        // ie: @Input(), @Output(), etc
    }
}

Pass your MountConfig as a second argument when calling mount:

cy.mount(EditorComponent, config)