Skip to main content

Angular Component Testing

info
What you'll learn​
  • How to set up component tests in Angular
  • How to configure Cypress for Angular projects

Framework Support​

Cypress Component Testing supports Angular 13+.

Tutorial​

Visit the Getting Started Guide for a step-by-step tutorial on adding component testing to any project and how to write your first tests.

Installation​

To get up and running with Cypress Component Testing in Angular, install Cypress into your project:

npm install cypress --save-dev

Open Cypress:

npx cypress open
Choose Component Testing

Choose Component Testing

The Cypress App will guide you through configuring your project.

info

For a step-by-step guide on how to create a component test, refer to the Getting Started guide.

For usage and examples, visit the Angular Examples guide.

Framework Configuration​

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.

Angular CLI Configuration​

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    specPattern: '**/*.cy.ts',
  },
})

Options API​

You can also use the options API to provide your own project specific configuration to your devServer. The devServer configuration receives an options property:

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,
          },
        },
      },
    },
  },
}

Sample Angular Apps​

Contents