Cypress组件测试报错Cannot GET /__cypress/src/index.html求解决方案

我在StackOverflow上找了不少相关帖子，但都没找到明确解决方案。现在尝试用Cypress做Angular+Ionic组件测试，试了两种写法：

第一种测试代码 #

import { GroupPage } from './group.page'

describe('StepperComponent', () => {
  it('mounts', () => {
    cy.mount(`<app-group></app-group>`, {
      declarations: [GroupPage],
    })
  })
})

第二种测试代码 #

import { LoginPage } from './login.page'

describe('LoginPage', () => {
  it('mounts', () => {
    cy.mount(LoginPage)
  })
})

已更新的Cypress配置 #

component: {
  devServer: {
    framework: "angular",
    bundler: "webpack",
  },
  specPattern: "**/*.cy.ts",
  indexHtmlFile: "cypress/support/component-index.html",
  supportFile: "cypress/support/component.ts",
},

使用的依赖版本 #

"cypress": "^10.7.0",
"@ionic/angular": "^6.1.9",
"@angular/compiler-cli": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/fire": "^7.4.1",
"@angular/forms": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",

待测试组件代码 #

import { Component, OnInit } from '@angular/core';
import { Auth, getAuth } from '@angular/fire/auth';
import { UserService } from 'src/app/services/user.service';
import { PresentationsService } from 'src/app/utilities/presentations.service';

@Component({
  selector: 'app-traval-group',
  templateUrl: './traval-group.page.html',
  styleUrls: ['./traval-group.page.scss'],
})
export class GroupPage implements OnInit {
  userInfo: any;
  auth: Auth;

  constructor(private presentService: PresentationsService,
              private userService: UserService) { }

  async ngOnInit() {
    this.auth = getAuth();
    this.userInfo = await this.userService.getUserInfo(this.auth.currentUser.uid);
  }

  createGroup() {
    if ((!this.userInfo) || (!this.userInfo.userInfo?.dateOfBirth)) {
      this.presentService.missingData("", "")
      return
    }
  }
}

现在运行测试时遇到错误：Cannot GET /__cypress/src/index.html，求解决办法。

解决方案 #

1. 检查component-index.html文件路径与内容 #

确保cypress/support/component-index.html文件存在，且包含基础HTML结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Cypress Component Test</title>
  <base href="/">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="root"></div>
</body>
</html>

若文件不存在，手动创建；也可直接移除配置中的indexHtmlFile项，让Cypress自动生成默认模板。

2. 修正组件挂载逻辑 #

• 第一种写法中组件选择器错误，你的组件选择器是<app-traval-group>，需同步修改：

cy.mount(`<app-traval-group></app-traval-group>`, {
  declarations: [GroupPage],
  providers: [
    // 模拟依赖服务，避免初始化报错
    { provide: UserService, useValue: { getUserInfo: () => Promise.resolve({ userInfo: { dateOfBirth: '1990-01-01' } }) } },
    { provide: PresentationsService, useValue: { missingData: () => {} } }
  ]
})

• 第二种直接挂载组件类的方式，需确保已安装@cypress/angular插件，同时同样要注入必要依赖。

3. 确认Cypress Angular插件配置 #

确保安装了兼容版本的@cypress/angular：

npm install @cypress/angular --save-dev

并在cypress/support/component.ts中导入支持：

import '@cypress/angular/support'

4. 调整devServer配置（适配Ionic+Angular） #

修改Cypress配置中的devServer部分，指定Angular项目配置：

devServer: {
  framework: "angular",
  bundler: "webpack",
  options: {
    projectConfig: './angular.json',
    target: 'development'
  }
}

5. 清理缓存并重启服务 #

执行以下命令清理缓存后重启测试：

npx cypress cache clear
rm -rf node_modules/.cache

内容的提问来源于stack exchange，提问作者D.Hodges