Blog Post

Testing Angular Components Using Cypress

by Younes Jaaidi •
Feb 18, 2021 • 6 minutes

Whatever framework you are using, and even without frameworks, component testing is a challenging topic as there is no one-size-fits-all approach.

One of the first challenges is picking a testing framework. In this blog post, we will focus on , and which are gaining popularity in both JavaScript and Angular communities.

Jest Limitations

While staying simple and easy to set up compared to other tools, Jest provides a nice panel of features like its feature-rich API, the interactive watch mode, human-readable reports, native parallelization, and its flexible mocking system. These Developer Experience enhancements encourage us to write tests and can act as efficiency-boosters.

<div>
  <h1 *ngIf="condition">Marmicode</h1>
</div>

<div *ngIf="condition">
  <h1>Marmicode</h1>
</div>

<div>
  <h1 [class.hidden]="!condition">Marmicode</h1>
</div>

<div [class.hidden]="!condition">
  <h1>Marmicode</h1>
</div>

cy.visit('/iframe.html?id=blogpost--default');
cy.get('h1').contains('Testing Angular Components Using Cypress')

import { TitleComponent } from '.../src/title.component';

it('should display default title', () => {
  mount(TitleComponent);
  cy.get('h1').contains('👋 Welcome');
});

mount(TitleComponent, {
  inputs: {appName: 'Marmicode'}
});
cy.get('h1').contains('👋 Welcome to Marmicode');

mount(TitleComponent, {
  providers: [
    {
      provide: Settings,
      useValue: {greetings: '🇫🇷 Bienvenue'}
    }
  ]
});
cy.get('h1').contains('🇫🇷 Bienvenue');

mount(`<mc-title></mc-title>`, {
  imports: [TitleModule],
})

import { Love } from '.../love.stories.ts';

describe('Love', () => {
  it('should show some love', () => {
    mountStory(Love);
    cy.get('h1').contains('❤️');
  });
});

git clone https://github.com/jscutlery/test-utils
npm install
npx nx e2e cypress-mount-integration --watch