Error Angular CLI with Jest and Cypress - duplicate identifier beforeEach

[jscanlon77]

Operating System: Windows
Cypress Version: 3.1.1
Browser Version: Chrome 65

Cypress breaks build of Angular 6 project using CLI and Jest.

Desired behavior:

The desired behavior should be a clear separation of types used so that such a conflict does not
break an existing Angular project with Jest.

I have tried the solution in #1087 with regards to separate cypress tsconfig.json and root tsconfig.json to no avail, and I see there is similar open question in #892. There are still conflicts in the project and hence it will not build.

Steps to reproduce:

With an Angular 6 (CLI) project which already contains Jest)
install Cypress using
set CYPRESS_INSTALL_BINARY=<zip location> && npm i cypress --save --dev

run ng serve

The result is below:

[jscanlon77]

OK - I solved this by performing the following actions.

On the project level tsconfig.json
Remove typeRoots array. the tsconfig.json now looks like this

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    // "typeRoots": [
    //   "../node_modules/@types"
    // ],
    "types": [
      "jest", "node", "jquery"
    ],
    "paths": {
      "jszip": [
        "../node_modules/jszip/dist/jszip.min.js"
      ]
    },
  }
}

and then added the tsconfig.json in the cypress folder (as discussed in the above issue numbers)

{
    "compilerOptions": {
      "strict": true,
      "baseUrl": "../node_modules",
      "target": "es5",
      "lib": ["es5", "dom"],
      "types": ["cypress", "chai","node", "jquery"]
    },
    "include": [
      "**/*.ts"
    ]
  }

And there were no clashes and the project built fine.