Angular Cypress component testing error: Unexpected framework angular, expected one of create-react-app, nuxt, react, vue-cli, next, vue

Question

I wish to run my Cypress snapshot tests for my Angular app in a docker container to maintain consistency and make my visual tests less brittle. I am using the Cypress Docker container:

FROM cypress/included:10.1.0

Here is my cypress.config.ts file:

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',
    },
});

I'm able to build the Docker image, but when I try to run the container, I get the following error

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

I saw a resource that says:

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.

I'm not sure if it is right. I would think component testing for Angular would be a pretty important feature and running them in a Docker container should be possible.

Is there a way to do this or am I out of luck?

Answer 1

Cypress 10.1.0 does not support Angular Component testing, as that was not added until Cypress 10.5.0.

Upgrade your Cypress docker image to at least cypress/included:10.5.0 to gain support for Angular Component testing.