Angular API

Methods

mount

import { mount } from 'cypress/angular'

Be sure to use the cypress/angular-signals package if using Angular 17.2 and up and wishing to test signal()s within your component tests.

import { mount } from 'cypress/angular-signals'

Description	Mounts an Angular component inside Cypress browser
Signature	mount<T>(component: Type<T> | string, config?: MountConfig<T>): Cypress.Chainable<MountResponse<T>>
Returns	Cypress.Chainable<MountResponse>

mount Parameters

Name	Type	Description
component	Type<T> | string	Angular component being mounted or its template
config		MountConfig<T> (optional)

Example

import { mount } from '@cypress/angular'
import { StepperComponent } from './stepper.component'
import { MyService } from 'services/my.service'
import { SharedModule } from 'shared/shared.module'
it('mounts', () => {
  mount(StepperComponent, {
    providers: [MyService],
    imports: [SharedModule],
  })
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
})

// or

it('mounts with template', () => {
  mount('<app-stepper></app-stepper>', {
    declarations: [StepperComponent],
  })
})

createOutputSpy

import { createOutputSpy } from 'cypress/angular'

Description	Creates a new Event Emitter and then spies on it's emit method
Signature	(alias: string) => any
Returns	EventEmitter<T>

createOutputSpy parameters

Name	Type	Description
alias	string	alias name you want to use for your cy.spy() alias

Example

import { StepperComponent } from './stepper.component'
import { mount, createOutputSpy } from '@cypress/angular'

it('Has spy', () => {
  mount(StepperComponent, { change: createOutputSpy('changeSpy') })
  cy.get('[data-cy=increment]').click()
  cy.get('@changeSpy').should('have.been.called')
})

Interfaces

MountConfig

Additional module configurations needed while mounting the component, like providers, declarations, imports and even component @Inputs()

members

Name	Type	Description
autoSpyOutputs	boolean (optional)	flag to automatically create a cy.spy() for every component @Output() property
autoDetectChanges	boolean (optional)	flag defaulted to true to automatically detect changes in your components
componentProperties	Partial<{[P in keyof T]: T[P];}> (optional)	If using the cypress/angular-signals test harness, this type is adapted to Partial<{[P in keyof T]: T[P] extends InputSignal<infer V> ? InputSignal<V> | WritableSignal<V> | V : T[P]}> to allow for generic types to be wrapped inside a signal

MountResponse

Type that the mount function yields

members

Name	Type	Description
fixture	ComponentFixture<T>	Fixture for debugging and testing a component.
component	T	The instance of the root component class

See https://angular.io/api/core/testing/ComponentFixture#componentInstance