CODEWITHSUNDEEP
angularcypress
Armin Hafner
Armin Hafner

Reputation: 71

How can I mount Angular Component in Cypress Component Test Runner

I tried to mount an Angular Component in my newly setup Cypress Component Test Runner Environment in Angular like so:

import { ɵrenderComponent as renderComponent, ɵcompileComponent as compileComponent} from '@angular/core';
import '@angular/compiler';
import 'zone.js';
import { UT1DashEmployeesComponent } from './ut1-dash-employees.component';

/* eslint-env mocha */
/* global cy */
describe('UT1DashEmployeesComponent', () => {
  beforeEach(() => {
    const html = `
      <head>
        <meta charset="UTF-8">
      </head>
      <body>
        <app-ut1-dash-employees></app-ut1-dash-employees>
      </body>
    `;
    const document = (cy as any).state('document');
    document.write(html);
    document.close();

    // Quick hack to get the component definition, which in our case is the first annotation.
    compileComponent(UT1DashEmployeesComponent, (<any>UT1DashEmployeesComponent).__annotations__[0]);
    renderComponent(UT1DashEmployeesComponent, {
      host: document.body
    });
  });

  it('works', () => {
    cy.contains('UT1DashEmployeesComponent!').should('be.visible');
  });

  it('works again', () => {
    cy.contains('UT1DashEmployeesComponent').should('be.visible');
  });

});

But I get following error:

Error Component 'UT1DashEmployeesComponent' is not resolved:

Because this error occurred during a before each hook we are skipping the remaining tests in the current suite: UT1DashEmployeesComponent

What can I do?

Upvotes: 0

Views: 727

Answers (1)

awesame
awesame

Reputation: 94

Cypress doesn't have native support for Angular components yet. There are some third-party plugins that are being merged into the product (I think).

[Edit: Cypress now natively supports Angular component testing]

Upvotes: 2

Related Questions