Angular应用Docker容器运行Cypress组件测试遇框架不支持错误求助

问题说明 #

你尝试使用cypress/included:10.1.0镜像在Docker中运行Angular组件的Cypress快照测试，但运行容器时触发错误：

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

Error: Unexpected framework angular, expected one of create-react-app, nuxt, react, vue-cli, next, vue

你看到的资料描述正确：Cypress 10.x版本的组件测试devServer配置未官方支持Angular框架，无法直接通过指定framework: 'angular'让Cypress自动管理Angular开发服务器，但并非无法实现需求，以下是三种可行解决方案。

解决方案 #

方案1：自定义Webpack DevServer（适配Cypress 10.x） #

通过手动导出Angular的Webpack配置，为Cypress组件测试提供自定义devServer：

1. 更新Dockerfile：确保安装项目依赖

FROM cypress/included:10.1.0
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

2. 安装必要依赖：在项目中执行（需包含在package.json中，以便Docker安装）

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

3. 修改cypress.config.ts：替换原devServer配置为自定义Webpack服务

import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from '@simonsmith/cypress-image-snapshot/plugin';
import { devServer } from 'cypress-webpack-dev-server';
import { getWebpackConfig } from '@angular-builders/custom-webpack';

export default defineConfig({
    component: {
        devServer(devServerConfig) {
            return devServer({
                ...devServerConfig,
                webpackConfig: getWebpackConfig('./webpack.cypress.config.js'),
            });
        },
        setupNodeEvents(on, config) {
            on('task', {
                log(message) {
                    console.log(message);
                    return null;
                },
            });
            addMatchImageSnapshotPlugin(on);
        },
        specPattern: '**/*.cy.ts',
    },
});

4. 创建Webpack配置文件：在项目根目录新建webpack.cypress.config.js

const { getWebpackConfig } = require('@angular-builders/custom-webpack');
module.exports = getWebpackConfig();

方案2：改用端到端测试模式运行组件视觉测试 #

绕开组件测试的devServer限制，将组件嵌入测试页面后用端到端测试进行快照：

1. 创建Angular测试页面：在项目中新增测试模块和页面，将需要测试的组件渲染到页面中，并配置路由访问该页面（例如/test-components）

2. 修改cypress.config.ts：切换为端到端测试配置

import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from '@simonsmith/cypress-image-snapshot/plugin';

export default defineConfig({
    e2e: {
        baseUrl: 'http://localhost:4200',
        setupNodeEvents(on, config) {
            on('task', {
                log(message) {
                    console.log(message);
                    return null;
                },
            });
            addMatchImageSnapshotPlugin(on);
        },
        specPattern: 'cypress/e2e/**/*.cy.ts',
    },
});

3. 更新Dockerfile：启动Angular服务后再运行Cypress

FROM cypress/included:10.1.0
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["sh", "-c", "ng serve --host 0.0.0.0 & wait-on http://localhost:4200 && cypress run"]

4. 编写测试用例：在Cypress测试文件中访问测试页面，对目标组件执行快照

describe('Component Visual Tests', () => {
    it('should match snapshot for Button component', () => {
        cy.visit('/test-components');
        cy.get('app-button').matchImageSnapshot();
    });
});

方案3：升级Cypress到12+版本（推荐） #

Cypress 12及以上版本已官方支持Angular组件测试，无需复杂配置：

1. 升级依赖：更新项目中的Cypress及相关包

npm install cypress@^12.0.0 @simonsmith/cypress-image-snapshot --save-dev

2. 更新Docker镜像：使用对应版本的Cypress镜像

FROM cypress/included:12.17.4
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

3. 复用原cypress.config.ts：新版本已支持framework: 'angular'配置，原文件无需修改即可正常运行

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