{
  "doc": {
    "id": "app/component-testing/angular/api",
    "title": "Angular API",
    "description": "API for mounting Angular components in Cypress tests.",
    "section": "app",
    "source_path": "/llm/markdown/app/component-testing/angular/api.md",
    "version": "7ada28c0cd90e81cf56fd3fc73de6e6d45c16de6",
    "updated_at": "2026-05-13T21:55:41.935Z",
    "headings": [
      {
        "id": "app/component-testing/angular/api#angular-api",
        "text": "Angular API",
        "level": 1
      },
      {
        "id": "app/component-testing/angular/api#methods",
        "text": "Methods",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/api#mount",
        "text": "mount",
        "level": 3
      },
      {
        "id": "app/component-testing/angular/api#example",
        "text": "Example",
        "level": 4
      },
      {
        "id": "app/component-testing/angular/api#createoutputspy",
        "text": "createOutputSpy",
        "level": 3
      },
      {
        "id": "app/component-testing/angular/api#example",
        "text": "Example",
        "level": 4
      },
      {
        "id": "app/component-testing/angular/api#interfaces",
        "text": "Interfaces",
        "level": 2
      },
      {
        "id": "app/component-testing/angular/api#mountconfig",
        "text": "MountConfig",
        "level": 3
      },
      {
        "id": "app/component-testing/angular/api#mountresponse",
        "text": "MountResponse",
        "level": 3
      }
    ]
  },
  "content": {
    "type": "root",
    "children": [
      {
        "type": "heading",
        "depth": 1,
        "children": [
          {
            "type": "text",
            "value": "Angular API"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 2,
        "children": [
          {
            "type": "text",
            "value": "Methods"
          }
        ]
      },
      {
        "type": "heading",
        "depth": 3,
        "children": [
          {
            "type": "text",
            "value": "mount"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "// for Angular 20 and 21 using zoneless configurationimport { mount } from 'cypress/angular-zoneless'"
      },
      {
        "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": 4,
        "children": [
          {
            "type": "text",
            "value": "Example"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "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')})// orit('mounts with template', () => {  mount('<app-stepper></app-stepper>', {    declarations: [StepperComponent],  })})"
      },
      {
        "type": "heading",
        "depth": 3,
        "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": 4,
        "children": [
          {
            "type": "text",
            "value": "Example"
          }
        ]
      },
      {
        "type": "code",
        "lang": null,
        "meta": null,
        "value": "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')})"
      },
      {
        "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>autoSpyOutputs (deprecated)</td><td>boolean (optional)</td><td><p>flag to automatically create a cy.spy() for every component @Output() property. This is deprecated and not supported in <code>cypress/angular-zoneless</code> and will be removed in a future version</p></td></tr><tr><td>autoDetectChanges (deprecated)</td><td>boolean (optional)</td><td><p>flag defaulted to true to automatically detect changes in your components. This is deprecated and not supported in <code>cypress/angular-zoneless</code> and will be removed in a future version as it is not needed with zoneless configuration</p></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": 408
}