Angular Cypress 组件测试错误：意外的框架 Angular，预期是 create-react-app、nuxt、react、vue-cli、next、vue 之一

Question

我希望在 Docker 容器中为我的 Angular 应用程序运行 cypress 快照测试，以保持一致性并使我的视觉测试不那么脆弱。我正在使用 cypress docker 容器：

FROM cypress/included:10.1.0

这是我的 cypress.config.ts 文件：

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

export default defineConfig({
    component: {
        devServer: {
            framework: 'angular',
            bundler: 'webpack',
        },
        setupNodeEvents(on, config) {
            on('task', {
                log(message) {
                    console.log(message);
                    return null;
                },
            });
            addMatchImageSnapshotPlugin(on);
        },
        specPattern: '**/*.cy.ts',
    },
});

我能够构建 docker 映像，但是当我尝试运行 dockerfile 时，出现以下错误

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 component testing does not officially support the Angular framework out of the box for its devServer configuration. This limitation means you cannot directly specify framework: 'angular' in the cypress.config.js or cypress.config.ts file and expect Cypress to automatically manage the Angular development server for component tests.

我不确定这是否正确。我认为 Angular 的组件测试将是一个非常重要的功能，并且在 Docker 容器中运行它们应该是可能的。

有办法做到这一点还是我运气不好？

Answer 1

Cypress 10.1.0 不支持 Angular 组件测试，因为直到Cypress 10.5.0才添加该测试。

将您的 Cypress docker 镜像至少升级到

cypress/included:10.5.0

，以获得对 Angular 组件测试的支持。