{
  "doc": {
    "id": "app/write-tests/component-testing/angular/api",
    "title": "Angular API",
    "description": "API for mounting Angular components in Cypress tests.",
    "section": "app",
    "source_path": "/llm/markdown/app/write-tests/component-testing/angular/api.md",
    "version": "066c46e056f0f322a0670d2d3aa4e6adaebfe717",
    "updated_at": "2026-09-10T13:30:12.426Z",
    "headings": [
      {
        "id": "app/write-tests/component-testing/angular/api#angular-api",
        "text": "Angular API",
        "level": 1
      },
      {
        "id": "app/write-tests/component-testing/angular/api#mount",
        "text": "mount",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/angular/api#example",
        "text": "Example",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/angular/api#createoutputspy",
        "text": "createOutputSpy",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/angular/api#example",
        "text": "Example",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/angular/api#interfaces",
        "text": "Interfaces",
        "level": 2
      },
      {
        "id": "app/write-tests/component-testing/angular/api#mountconfig",
        "text": "MountConfig",
        "level": 3
      },
      {
        "id": "app/write-tests/component-testing/angular/api#mountresponse",
        "text": "MountResponse",
        "level": 3
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Angular API"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "The `cypress/angular` module provides the following methods and interfaces for mounting and testing Angular components."
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "mount"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { mount } from 'cypress/angular'"
      },
      {
        "type": "html",
        "value": "<table><tbody><tr><td>Description</td><td>Mounts an Angular component inside Cypress browser</td></tr><tr><td>Signature</td><td><p>mount&lt;T&gt;(component: Type&lt;T&gt; | string, config?: MountConfig&lt;T&gt;): Cypress.Chainable&lt;MountResponse&lt;T&gt;&gt;</p></td></tr><tr><td>Returns</td><td>Cypress.Chainable&lt;MountResponse&gt;</td></tr></tbody></table>"
      },
      {
        "type": "html",
        "value": "<table><caption>mount Parameters</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>component</td><td>Type&lt;T&gt; | string</td><td>Angular component being mounted or its template</td></tr><tr><td>config</td><td></td><td>MountConfig&lt;T&gt; (optional)</td></tr></tbody></table>"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Example"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { mount } from '@cypress/angular'\nimport { StepperComponent } from './stepper.component'\nimport { MyService } from 'services/my.service'\nimport { SharedModule } from 'shared/shared.module'\nit('mounts', () => {\n  mount(StepperComponent, {\n    providers: [MyService],\n    imports: [SharedModule],\n  })\n  cy.get('[data-cy=increment]').click()\n  cy.get('[data-cy=counter]').should('have.text', '1')\n})\n\n// or\n\nit('mounts with template', () => {\n  mount('<app-stepper></app-stepper>', {\n    declarations: [StepperComponent],\n  })\n})"
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "createOutputSpy"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { createOutputSpy } from 'cypress/angular'"
      },
      {
        "type": "html",
        "value": "<table><tbody><tr><td>Description</td><td>Creates a new Event Emitter and then spies on it's <code>emit</code> method</td></tr><tr><td>Signature</td><td>(alias: string) =&gt; any</td></tr><tr><td>Returns</td><td>EventEmitter&lt;T&gt;</td></tr></tbody></table>"
      },
      {
        "type": "html",
        "value": "<table><caption>createOutputSpy parameters</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>alias</td><td>string</td><td>alias name you want to use for your cy.spy() alias</td></tr></tbody></table>"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "Example"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "import { StepperComponent } from './stepper.component'\nimport { mount, createOutputSpy } from '@cypress/angular'\n\nit('Has spy', () => {\n  mount(StepperComponent, { change: createOutputSpy('changeSpy') })\n  cy.get('[data-cy=increment]').click()\n  cy.get('@changeSpy').should('have.been.called')\n})"
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Interfaces"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "MountConfig"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Additional module configurations needed while mounting the component, like providers, declarations, imports and even component @Inputs()"
          }
        ]
      },
      {
        "type": "html",
        "value": "<table><caption>members</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>componentProperties</td><td><p>Partial&lt;{[P in keyof T]: T[P] extends InputSignal&lt;infer V&gt; ? InputSignal&lt;V&gt; | WritableSignal&lt;V&gt; | V : T[P]}&gt; (optional)</p></td><td><p>signal based inference types need only apply if you are using signals within your component tests</p></td></tr></tbody></table>"
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "MountResponse"
          }
        ]
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "Type that the `mount` function yields"
          }
        ]
      },
      {
        "type": "html",
        "value": "<table><caption>members</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>fixture</td><td>ComponentFixture&lt;T&gt;</td><td>Fixture for debugging and testing a component.</td></tr><tr><td>component</td><td>T</td><td>The instance of the root component class</td></tr></tbody></table>"
      },
      {
        "type": "paragraph",
        "children": [
          {
            "type": "text",
            "value": "See "
          },
          {
            "type": "link",
            "title": null,
            "url": "https://angular.io/api/core/testing/ComponentFixture#componentInstance",
            "children": [
              {
                "type": "text",
                "value": "https://angular.io/api/core/testing/ComponentFixture#componentInstance"
              }
            ]
          }
        ]
      }
    ]
  },
  "token_estimate": 333
}