{
  "doc": {
    "id": "app/component-testing/angular/overview",
    "title": "Angular Component Testing",
    "description": "Learn how to set up component tests in Angular and configure Cypress for Angular projects.",
    "section": "app",
    "source_path": "/llm/markdown/app/component-testing/angular/overview.md",
    "version": "524ff5211e60b5d53e55d6ad976d83966f66e7cd",
    "updated_at": "2026-04-30T14:20:05.396Z",
    "headings": [
      {
        "id": "app/component-testing/angular/overview#angular-component-testing",
        "text": "Angular Component Testing",
        "level": 1
      },
      {
        "id": "app/component-testing/angular/overview#what-youll-learn",
        "text": "What you'll learn",
        "level": 5
      },
      {
        "id": "app/component-testing/angular/overview#framework-support",
        "text": "Framework Support",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/overview#tutorial",
        "text": "Tutorial",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/overview#installation",
        "text": "Installation",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/overview#framework-configuration",
        "text": "Framework Configuration",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/overview#angular-cli-configuration",
        "text": "Angular CLI Configuration",
        "level": 3
      },
      {
        "id": "app/component-testing/angular/overview#options-api",
        "text": "Options API",
        "level": 4
      },
      {
        "id": "app/component-testing/angular/overview#sample-angular-apps",
        "text": "Sample Angular Apps",
        "level": 4
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Angular Component Testing"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 5,
        "children": [
          {
            "type": "text",
            "value": "What you'll learn"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to set up component tests in Angular"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "How to configure Cypress for Angular projects"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Framework Support"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing supports Angular `^18.0.0`, `^19.0.0`, `^20.0.0`, and `^21.0.0`."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Our testing harness, `cypress/angular`, still requires `zone.js` and `@angular-devkit/build-angular` to be installed in your project, even if your project is zoneless or is built with `@angular/build`. If you wish to use the zoneless configuration, which is the default in Angular 21, you can use `cypress/angular-zoneless` testing harness instead as of Cypress `15.8.0`."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Tutorial"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Visit the "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/get-started.md",
            "children": [
              {
                "type": "text",
                "value": "Getting Started Guide"
              }
            ]
          },
          {
            "type": "text",
            "value": " for a step-by-step tutorial on adding component testing to any project and how to write your first tests."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Installation"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "To get up and running with Cypress Component Testing in Angular, install Cypress into your project:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "npm"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "yarn"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "pnpm"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "npm install cypress --save-dev"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "yarn add cypress --dev"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "pnpm add --save-dev cypress"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Open Cypress:"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "npm"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "yarn"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "pnpm"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "npx cypress open"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "yarn cypress open"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "pnpm cypress open"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Choose Component Testing"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The Cypress App will guide you through configuring your project."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "For a step-by-step guide on how to create a component test, refer to the "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/get-started.md",
            "children": [
              {
                "type": "text",
                "value": "Getting Started"
              }
            ]
          },
          {
            "type": "text",
            "value": " guide."
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "For usage and examples, visit the "
          },
          {
            "type": "link",
            "title": null,
            "url": "/llm/markdown/app/component-testing/angular/examples.md",
            "children": [
              {
                "type": "text",
                "value": "Angular Examples"
              }
            ]
          },
          {
            "type": "text",
            "value": " guide."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Framework Configuration"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Cypress Component Testing works out of the box with `@angular/cli` projects. Cypress will automatically detect your project is Angular during setup and configure it properly. The examples below are for reference purposes."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Angular CLI Configuration"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress.config.js"
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "text",
                    "value": "cypress.config.ts"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "const { defineConfig } = require('cypress')module.exports = defineConfig({  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',    },    specPattern: '**/*.cy.ts',  },})"
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { defineConfig } from 'cypress'export default defineConfig({  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',    },    specPattern: '**/*.cy.ts',  },})"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Options API"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "You can also use the `options` API to provide your own project specific configuration to your `devServer`. The `devServer` configuration receives an `options` property:"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { defineConfig } from 'cypress'export default {  component: {    devServer: {      framework: 'angular',      bundler: 'webpack',      options: {        projectConfig: {          root: '',          sourceRoot: 'apps/my-app',          buildOptions: {            outputPath: 'dist/my-app',            index: 'apps/my-app/src/index.html',            main: 'apps/my-app/src/main.ts',            polyfills: 'apps/my-app/src/polyfills.ts',            tsConfig: 'apps/my-app/tsconfig.app.json',            inlineStyleLanguage: 'scss',            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],            styles: ['apps/my-app/src/styles.scss'],            scripts: [],            buildOptimizer: false,            optimization: false,            vendorChunk: true,            extractLicenses: false,            sourceMap: true,            namedChunks: true,          },        },      },    },  },}"
      },
      {
        "type": "heading",
        "depth": 4,
        "children": [
          {
            "type": "text",
            "value": "Sample Angular Apps"
          }
        ]
      },
      {
        "type": "list",
        "ordered": false,
        "start": null,
        "spread": false,
        "children": [
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-standalone",
                    "children": [
                      {
                        "type": "text",
                        "value": "Angular 20 Standalone"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "type": "listItem",
            "spread": false,
            "checked": null,
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "type": "link",
                    "title": null,
                    "url": "https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-zoneless",
                    "children": [
                      {
                        "type": "text",
                        "value": "Angular 21 Zoneless"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "token_estimate": 545
}