如何解决Cypress+Angular组件测试中的依赖注入不兼容错误

错误原因分析 #

• NgbModal是@ng-bootstrap提供的服务类，不是带有@NgModule装饰器的模块，不能添加到imports数组中
• FormBuilder属于Angular响应式表单的服务，同样不能放入imports，需通过导入对应模块或放入providers来提供
• 直接提供Router和ActivatedRoute的真实类，在测试环境中易触发路由初始化异常，建议用官方测试模块模拟

修正后的Cypress测试代码 #

import {HeaderComponent} from "../../../src/app/components/header/header.component";
import {RouterTestingModule} from "@angular/router/testing";
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
import {ReactiveFormsModule} from "@angular/forms";

describe('Header component test', () => {
  context('Testing the navigation 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],
        imports: [
          RouterTestingModule, // 模拟路由模块，自动提供Router和ActivatedRoute的测试实例
          ReactiveFormsModule  // 导入表单模块，自动提供FormBuilder等表单服务
        ],
        providers: [
          NgbModal // 将服务类放入providers数组
        ]
      })
      // 后续Cypress测试命令
    })
  })
})

额外说明 #

• RouterTestingModule会创建模拟的路由环境，避免真实路由服务在测试中的初始化问题
• 导入ReactiveFormsModule后，Angular会自动注册FormBuilder、FormGroup等表单相关依赖，无需手动声明
• 如果项目中用到了@ng-bootstrap的其他组件，也可以直接导入NgbModule（如NgbModule.forRoot()），一次性引入所有@ng-bootstrap的服务和组件

内容的提问来源于stack exchange，提问作者liberlux