Angular 18库项目集成Cypress组件测试遇配置错误求助

Angular库本身没有独立的构建运行环境，Cypress组件测试依赖Angular CLI的Webpack配置，所以需要通过以下步骤配置：

1. 在库项目中添加测试用Angular应用 #

库无法单独运行组件测试，需要一个宿主应用提供构建环境：

• 在库项目根目录执行：ng new test-app（根据需要添加--standalone或--no-standalone参数）
• 进入测试应用目录，将库链接到应用：ng add ../[你的库目录名]

2. 安装并配置Cypress #

• 在库项目根目录安装依赖：

npm install cypress @cypress/angular @cypress/webpack-dev-server --save-dev

• 初始化Cypress组件测试：npx cypress open --component，选择Angular框架
• 修改cypress.config.ts，指定测试应用的Angular配置文件：

import { defineConfig } from 'cypress';
import { angularComponentTesting } from '@cypress/angular';

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      // 指向测试应用的angular.json路径
      angularConfig: './test-app/angular.json',
    },
  },
});

3. 编写组件测试用例 #

在库的src/lib目录下创建__tests__文件夹，编写测试文件（例如your-component.cy.ts）：

import { YourComponent } from '../your-component';
import { mount } from '@cypress/angular';

describe('YourComponent', () => {
  it('渲染正常', () => {
    mount(YourComponent, {
      declarations: [YourComponent],
      // 导入组件依赖的模块、服务等
      imports: [],
    });
    cy.get('h1').should('contain', '预期文本');
  });
});

4. 修复依赖缺失问题 #

如果仍出现@angular-devkit/build-angular相关错误：

• 进入test-app目录执行：npm install @angular-devkit/build-angular --save-dev
• 确保库项目的package.json中也安装了对应版本的该依赖（可从测试应用的package.json中复制版本号）

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