Unit testing with Cypress and Angular

app.component.cy-spec.ts

/// <reference types="cypress" />

import { initEnv, mount } from 'cypress-angular-unit-test';
import { AppComponent } from './app.component';
// This 👇 is a dependency needed for router-outlet located in our app.component.html
import { RouterTestingModule } from '@angular/router/testing';

beforeEach(() => {
  // Init Angular stuff
  initEnv(AppComponent, { imports: [ RouterTestingModule ] });
});

describe('AppComponent', () => {
  it('Test welcome message', () => {
		const welcomeMessage = 'blog-angular-cypress-example';
    // component + any inputs object
    mount(AppComponent, {title: welcomeMessage});
    // use any Cypress command afterwards
    cy.contains(`${welcomeMessage} app is running!`);
  });
});

app.service.ts

/**
 * Adds two numbers and returns the result
 * @param number1 first number
 * @param number2 second number
 */
export const addNumbers = (number1: number, number2: number): number => {
  return number1 + number2;
};

cy-ts-preprocessor.ts

const webpackPreprocessor = require("@cypress/webpack-preprocessor");

const webpackOptions = {
  resolve: {
    extensions: [".ts", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true
            }
          }, {
            loader: 'angular2-template-loader'
          }
        ],
      },
      {
        test: /\.(scss)$/,
        loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
        exclude: /\.async\.(scss)$/
      },
      {
        test: /\.(html)$/,
        loader: 'html-loader',
        exclude: /\.async\.(css)$/
      },
      {
        test: /\.async\.(html|scss)$/,
        loaders: ['file?name=[name].[hash].[ext]', 'extract']
      }
    ]
  }
};

const options = {
  webpackOptions
};

module.exports = webpackPreprocessor(options);

cypress.json

{
  "experimentalComponentTesting": true,
  "componentFolder": "src",
  "testFiles": "**/*cy-spec.*"
}

cypress.yml

# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Cypress Tests

on:
  push:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.x]

    steps:
    - uses: actions/checkout@v2

    # Sets up multiple Node.js environment specified as per array in matrix above
    # This will result in running same workflow for different environments.
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install node-modules
      run: npm ci

    - name: Run tests
      run: npm run test:ci

index.ts

// cypress/support/index.ts
// core-js 3.*
require('core-js/es/reflect'); // 👈 I'm keeping only this import statement
// core-js 2.*
require('core-js/es7/reflect');
require('cypress-angular-unit-test/support');

new.app.component.cy-spec.ts

/// <reference types="cypress" />

import { initEnv, mount } from 'cypress-angular-unit-test';
import { AppComponent } from './app.component';
// This 👇 is a dependency needed for router-outlet located in our app.component.html
import { RouterTestingModule } from '@angular/router/testing';
// This 👇 is for testing addNumbers function
import { addNumbers } from './app.service';

beforeEach(() => {
  // Init Angular stuff
  initEnv(AppComponent, { imports: [ RouterTestingModule ] });
});

describe('AppComponent', () => {
  it('Test welcome message', () => {
    const welcomeMessage = 'blog-angular-cypress-example';
    // component + any inputs object
    mount(AppComponent, {title: welcomeMessage});
    // use any Cypress command afterwards
    cy.contains(`${welcomeMessage} app is running!`);
  });

  it('Test addNumbers() function', () => {
    // Validate if it is a function
    expect(addNumbers, 'addNumbers()').to.be.a('function');
    // Test the function
    const number1 = 10;
    const number2 = 20;
    const correctAddition = 30;
    expect(addNumbers(number1, number2), `addNumbers(${number1}, ${number2})`).to.eq(correctAddition);
    // Make sure it returns value of type number
    expect(addNumbers(number1, number2)).to.be.a('number');
  });
});

tsconfig.json

{
  "extends": "../tsconfig.json",
  "include": [
    "../node_modules/cypress",
    "*/*.ts"
  ],
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "skipLibCheck": true
  }
}