Skip to main content

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'
DescriptionMounts an Angular component inside Cypress browser
Signature

mount<T>(component: Type<T> | string, config?: MountConfig<T>): Cypress.Chainable<MountResponse<T>>

ReturnsCypress.Chainable<MountResponse>
mount Parameters
NameTypeDescription
componentType<T> | stringAngular component being mounted or its template
configMountConfig<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'
DescriptionCreates a new Event Emitter and then spies on it's emit method
Signature(alias: string) => any
ReturnsEventEmitter<T>
createOutputSpy parameters
NameTypeDescription
aliasstringalias 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
NameTypeDescription
autoSpyOutputsboolean (optional)

flag to automatically create a cy.spy() for every component @Output() property

autoDetectChangesboolean (optional)

flag defaulted to true to automatically detect changes in your components

componentPropertiesPartial<{[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
NameTypeDescription
fixtureComponentFixture<T>Fixture for debugging and testing a component.
componentTThe instance of the root component class

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