• 1. ng-jest-cypress-template
  • 1.1. Create project
  • 1.2. Add eslint
  • 1.3. Add prettier
    • 1.3.1. Install
    • 1.3.2. Add .prettierignore
    • 1.3.3. Add .prettierrc.json
    • 1.3.4. Install eslint-config-prettier:
    • 1.3.5. Update .eslintrc.json
    • 1.3.6. Edit package.json
  • 1.4. Add jest
    • 1.4.1. Remove karma & jasmine
    • 1.4.2. Install
    • 1.4.3. Create setup-jest.ts
    • 1.4.4. Create jest.config.js
    • 1.4.5. Edit tsconfig.json
    • 1.4.6. Edit tsconfig.spec.json
    • 1.4.7. Edit package.json
  • 1.5. Add cypress
    • 1.5.1. Websites
    • 1.5.2. Install Cypress
    • 1.5.3. Update cypress.json
    • 1.5.4. Update package.json
    • 1.5.5. Add tsconfig.json
    • 1.5.6. Add typescipt.spec.ts
    • 1.5.7. Add Angular test files
      • 1.5.7.1. Add po.ts
      • 1.5.7.2. Add angular.spec.ts
• Extras
  • Jest paths mapping
    • Typescript config
    • Jest config
• App Actions
  • eslint plugins
  • Jest

1. ng-jest-cypress-template

1.1. Create project

This project was generated with Angular CLI version 12.2.8.

ng new ng-jest-cypress-template --style=scss --routing --strict

1.2. Add eslint

https://github.com/angular-eslint/angular-eslint

ng add @angular-eslint/schematics

1.3. Add prettier

1.3.1. Install

npm install --save-dev --save-exact prettier

1.3.2. Add .prettierignore

package.json
package-lock.json
dist
build

1.3.3. Add .prettierrc.json

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "endOfLine": "auto"
}

1.3.4. Install eslint-config-prettier:

npm install --save-dev --save-exact eslint-config-prettier

1.3.5. Update .eslintrc.json

{
  "extends": [
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates",
    "prettier"
  ]
}

1.3.6. Edit package.json

{
  "scripts": {
    "prettier:check": "prettier --check .",
    "prettier:write": "prettier --write ."
  }
}

1.4. Add jest

https://github.com/thymikee/jest-preset-angular

1.4.1. Remove karma & jasmine

npm remove karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter @types/jasmine jasmine-core

rm ./karma.conf.js ./src/test.ts

1.4.2. Install

npm install --save-dev --save-exact jest jest-preset-angular @types/jest

1.4.3. Create setup-jest.ts

In project root:

import 'jest-preset-angular/setup-jest';

1.4.4. Create jest.config.js

In project root:

require('jest-preset-angular/ngcc-jest-processor');

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  testPathIgnorePatterns: ['<rootDir>/cypress/'],
};

1.4.5. Edit tsconfig.json

See https://github.com/cypress-io/cypress-and-jest-typescript-example

{
  // Required for jest to work with cypress
  "include": ["src/*.ts"],
  "exclude": ["src/*.spec.ts"]
  //
}

1.4.6. Edit tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "esModuleInterop": true,
    "outDir": "./out-tsc/spec",
    "types": ["jest"]
  },
  "files": ["src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

1.4.7. Edit package.json

{
  "scripts": {
    // ...
    "test": "jest"
    // ...
  }
}

1.5. Add cypress

1.5.1. Websites

• https://www.cypress.io/
• GitHub

1.5.2. Install Cypress

npm install --save-dev --save-exact cypress

npx cypress open

1.5.3. Update cypress.json

{
  "baseUrl": "http://localhost:4200",
  "defaultCommandTimeout": 10000
}

1.5.4. Update package.json

{
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  }
}

1.5.5. Add tsconfig.json

In cypress folder

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "sourceMap": false,
    "strict": true,
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}

1.5.6. Add typescipt.spec.ts

In cypress/integration folder.

it('works', () => {
  cy.wrap('foo').should('equal', 'foo');
});

1.5.7. Add Angular test files

1.5.7.1. Add po.ts

In cypress\support folder.

// we could place this url into cypress.json as "baseUrl"
const url = 'http://localhost:4200';

export const navigateTo = () => cy.visit(url);

export const getGreeting = () => cy.get('.toolbar > span');

1.5.7.2. Add angular.spec.ts

In cypress\integrations\

import { navigateTo, getGreeting } from '../support/po';

describe('Hello Angular', () => {
  beforeEach(navigateTo);

  it('should display welcome message', () => {
    getGreeting().contains('Welcome');
  });
});

Extras

Jest paths mapping

Typescript config

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@app/*": ["src/app/*"]
    }
  }
}

Jest config

module.exports = {
  /*
    https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping/

    tsconfig.json
    "paths": {
      "@app/*": ["src/app/*"]
    }
  */
  moduleNameMapper: {
    '^@app/(.*)$': '<rootDir>/src/app/$1',
  },
};

App Actions

• https://glebbahmutov.com/blog/testing-angular-application-via-app-actions/
• https://www.cypress.io/blog/2019/01/03/stop-using-page-objects-and-start-using-app-actions/

eslint plugins

• https://github.com/import-js/eslint-plugin-import
• https://github.com/jest-community/eslint-plugin-jest
• https://github.com/testing-library/eslint-plugin-jest-dom
• https://github.com/testing-library/eslint-plugin-testing-library

Jest

• https://github.com/testing-library/angular-testing-library/blob/main/apps/example-app/src/app/examples/02-input-output.spec.ts
• https://github.com/testing-library/jest-dom
• https://github.com/testing-library/user-event

https://docs.cypress.io/guides/component-testing/component-test-troubleshooting