1

I am trying to test an Angular component with Cypress that uses the following imports and constructor dependencies:

Angular component:

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import { environmentCommon } from "../../../environments/environment.common";
import { Router, ActivatedRoute } from "@angular/router";
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
import {FormBuilder, FormGroup, Validators, FormControl} from "@angular/forms";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  [properties]

  constructor(private router: Router,
              private route: ActivatedRoute,
              private formbuilder: FormBuilder,
              private modalService: NgbModal) { }
  [methods]
}

Cypress component spec file:

import {HeaderComponent} from "../../../src/app/components/header/header.component";
import {Router} from "@angular/router";

describe('Header component test', () => {
  context('Testing the navigatiuon bar', () => {
    it('Should have the top navigation bar with a bootstrap toolbox icon 
 and unordered list with tabs', () => {
      cy.mount('<app-header></app-header>', {
        declarations: [HeaderComponent],
        providers:[ActivatedRoute, Router],
        imports:[NgbModal, FormBuilder]
      })
      [More cypress commands]
}

Whenever I try to run the test in Cypress, however, I get the following error:

mount<app-header></app-header>, Object{3}
Error
Unexpected value 'NgbModal' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.
View stack trace
liberlux
  • 85
  • 8
  • 1
    NgbModal is not a module. It does not belong in imports. FormBuilder is also in the wrong place. These all belong in providers. Just look at the pattern of the code you are testing. You must PROVIDE things for the constructor. –  Jan 25 '23 at 21:43
  • Thank you for your message. I have moved `NgbModal` and `FormBuilder` to my list of providers but now I get the error that my constructor is not compatible with Dependency Injection: `mount, {declarations: [function(){}, function(){}], providers: [function(){}, function(){}, function(){}]} Error This constructor was not compatible with Dependency Injection.` – liberlux Jan 26 '23 at 14:26
  • I have tried following the advice from this [post](https://stackoverflow.com/questions/60409270/angular-9-error-this-constructor-was-not-compatible-with-dependency-injection) and added the `RouterTestingModule` as an import but that little to help and the error message stays the same. – liberlux Jan 26 '23 at 14:35
  • Creating a stackblitz which reproduces your issue would be the best way of getting a solution. –  Jan 26 '23 at 15:36

0 Answers0