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​