Get rid of preprocessTypescript in e2e tests when using @jscutlery/cypres-harness

[yjaaidi]

We have to get rid of this hack.

devkit/packages/cypress-harness-e2e/src/plugins/index.ts

Lines 17 to 25 in 84a5420

	/* @hack using deprecated preprocessTypescript
	* as there is something wrong with the default Cypress config
	* that produces the following error when using things like @jscutlery/harness
	* that imports @angular/cdk/testing:
	* Error: Webpack Compilation Error
	* /jscutlery/devkit/node_modules/@angular/cdk/fesm2015/testing/testbed.mjs
	* Module not found: Error: Can't resolve '@angular/cdk/keycodes'
	* in '/jscutlery/devkit/node_modules/@angular/cdk/fesm2015/testing' */
	on('file:preprocessor', preprocessTypescript(config));

This can be reproduced by removing this line and running e2e tests: nx run-many --target e2e --all

[LayZeeDK]

I can't even get this hack working in my end-to-end tests (not Cypress Angular component tests) using Nx 13.10.2 with Cypress 9.1.1 which is kind of interesting since you seem to have similar versions 🤔

{
  "engines": {
    "node": "16.14.2",
    "npm": "Use Yarn CLI instead of NPM CLI",
    "yarn": "1.22.18"
  },
  "volta": {
    "node": "16.14.2",
    "yarn": "1.22.18"
  },
  "scripts": {
    "postinstall": "ngcc --properties es2015 browser module main"
  },
  "dependencies": {
    "@angular/animations": "13.3.3",
    "@angular/cdk": "13.3.3",
    "@angular/common": "13.3.3",
    "@angular/compiler": "13.3.3",
    "@angular/core": "13.3.3",
    "@angular/forms": "13.3.3",
    "@angular/platform-browser": "13.3.3",
    "@angular/platform-browser-dynamic": "13.3.3",
    "@angular/router": "13.3.3",
    "rxjs": "7.5.5",
    "tslib": "2.3.1",
    "zone.js": "0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.3.3",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
    "@angular/cli": "13.3.3",
    "@angular/compiler-cli": "13.3.3",
    "@angular/language-service": "13.3.3",
    "@jscutlery/cypress-harness": "0.3.11",
    "@nrwl/angular": "13.10.2",
    "@nrwl/cli": "13.10.2",
    "@nrwl/cypress": "13.10.2",
    "@nrwl/eslint-plugin-nx": "13.10.2",
    "@nrwl/jest": "13.10.2",
    "@nrwl/linter": "13.10.2",
    "@nrwl/nx-cloud": "latest",
    "@nrwl/workspace": "13.10.2",
    "@types/jest": "27.0.3",
    "@types/node": "16.11.27",
    "@typescript-eslint/eslint-plugin": "5.18.0",
    "@typescript-eslint/parser": "5.18.0",
    "cypress": "9.1.1",
    "cypress-pipe": "2.0.0",
    "eslint": "8.12.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "2.10.3",
    "jest": "27.2.5",
    "jest-preset-angular": "11.1.1",
    "ng-packagr": "13.3.1",
    "nx": "13.10.2",
    "postcss": "8.4.12",
    "postcss-import": "14.0.2",
    "postcss-preset-env": "6.7.1",
    "postcss-url": "10.1.3",
    "prettier": "2.5.1",
    "ts-jest": "27.0.7",
    "typescript": "4.6.3"
  }
}

[LayZeeDK]

I had "pluginsFile": false in my cypress.json configuration 🤦‍♂️ Replaced it with "pluginsFile": "./src/plugins/index.ts".

I also had to add "env": { "tsConfig": "tsconfig.json" } to cypress.json.