Angular Component Testing with Cypress

Mounting an Angular Component

The @cypress/angular mount function bootstraps an Angular component using Angular's own testing utilities under the hood, letting you supply inputs, declare needed imports, and provide services exactly as you would when configuring a real Angular module.

import { CounterComponent } from './counter.component';

it('increments the count when clicked', () => {
  cy.mount(CounterComponent, { componentProperties: { initialCount: 0 } });
  cy.get('[data-cy="count"]').should('have.text', '0');
  cy.get('[data-cy="increment"]').click();
  cy.get('[data-cy="count"]').should('have.text', '1');
});

componentProperties sets @Input() values directly, similar to how a parent template would bind them.

Angular Component Testing Syntax

cy.mount(MyComponent, { componentProperties: { input: value } });
cy.mount(MyComponent, {
  providers: [{ provide: MyService, useValue: fakeService }],
});

• componentProperties sets @Input()s (or modern input() signal values) for the mounted component.
• providers supplies services via Angular's dependency injection, real or faked as needed.
• Standalone components (the modern default) can be mounted directly without an enclosing NgModule.
• Output events (@Output()/output()) can be asserted using a stub bound in componentProperties.

Angular Component Testing Cheat Sheet

Common patterns for testing Angular components with Cypress.

Providing Fake Services via Dependency Injection

Angular's dependency injection makes it straightforward to swap a real service for a fake one during a component test, letting you control exactly what data or behavior the component receives without needing a real backend.

class FakeUserService {
  getUser() {
    return of({ id: 1, name: 'Jane Doe' });
  }
}

cy.mount(ProfileCardComponent, {
  providers: [{ provide: UserService, useClass: FakeUserService }],
});

Testing Output Events

Binding a Cypress stub directly to a component's output property lets you assert it was emitted with the expected value, verifying the component's outward-facing contract in isolation.

it('emits saved with the updated name', () => {
  const onSaved = cy.stub().as('onSaved');
  cy.mount(ProfileFormComponent, {
    componentProperties: { saved: { emit: onSaved } as any },
  });
  cy.get('[data-cy="name"]').clear().type('Jane');
  cy.get('[data-cy="submit"]').click();
  cy.get('@onSaved').should('have.been.calledWith', 'Jane');
});

The exact binding syntax can vary slightly by Angular/Cypress version; consult your project's current @cypress/angular setup.

Common Mistakes

• Trying to mount a component requiring a full NgModule without providing the necessary declarations/imports.
• Testing a component's injected service logic directly instead of faking the service and asserting on the component's own behavior.
• Forgetting standalone components still need their own explicit imports array satisfied during mount if they use other standalone dependencies.
• Not covering output event emissions, focusing only on rendered output and inputs.

Key Takeaways

• cy.mount() for Angular sets inputs via componentProperties and services via providers.
• Dependency injection makes faking services for isolated component tests straightforward.
• Output events can be tested by binding a stub directly to the output property.
• Standalone components simplify mounting, but still need their own dependencies satisfied.