Transpiling Cypress and Mocha at same time fail (Type conflict)

[basickarl]

Attempting to transpile TypeScript Cypress and Mocha test files at the same time.

Type files are at:

node_modules/cypress/types/mocha/index.d.ts
node_modules/@types/mocha/index.d.ts

Errors:

karl@karl-Dell-Precision-M3800:~/dev/MOP$ npx tsc --project tsconfig.test.json
node_modules/@types/mocha/index.d.ts:17:1 - error TS6200: Definitions of the following identifiers conflict with those in another file: Mocha, before, suiteSetup, after, suiteTeardown, beforeEach, setup, afterEach, teardown, mocha, MochaDone, ReporterConstructor

17 declare class Mocha {
   ~~~~~~~

  node_modules/cypress/types/mocha/index.d.ts:6:1
    6 interface MochaSetupOptions {
      ~~~~~~~~~
    Conflicts are in this file.

node_modules/@types/mocha/index.d.ts:22:33 - error TS2694: Namespace 'Mocha' has no exported member 'MochaOptions'.

22     constructor(options?: Mocha.MochaOptions);
                                   ~~~~~~~~~~~~

node_modules/@types/mocha/index.d.ts:24:18 - error TS2694: Namespace 'Mocha' has no exported member 'Suite'.

24     suite: Mocha.Suite;
                    ~~~~~

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2016",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "removeComments": true,
        "lib": ["es2015", "es2016", "dom"],
        "typeRoots": ["node_modules/@types"],
        "types": ["node", "cypress", "mocha"],
        "outDir": "./build/"
    },
    "include": [
        "./cypress/**/*.ts",
        "./tests/**/*.ts"
    ]
}

Cypress test file:

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

describe('example client e2e test', function() {
    it('should just pass', async function() {
        assert(true);
    });
});

Mocha test file:

import * as assert from 'assert';

suite('example server integration test', function(): void {
    test('should just pass', async function(): Promise<void> {
        assert(true);
    });
});

Versions:

        "@types/cypress": "^1.1.3",
        "@types/mocha": "^5.2.7",
        "cypress": "^3.4.0",
        "mocha": "^6.1.4",
        "typescript": "~3.2.2"

Temporary solution is to transpile them separately with their own types. Any idea of how one can make these play nice with each other?

If you are wondering what I am doing here, I am using Cypress for e2e and Mocha + JSDom for unit and integration tests.

[jordandlaman]

It is very possible that this has nothing to do with it "BUT" I did have something similar pop up when using the /// directives at the top of the page. I had to remove them from all the cypress tests and then configure the tsconfig to properly include the cypress types. I think I had to nest tsconfigs and extend a base one due to how my project is setup (monorepo).

[bahmutov]

@basickarl see if this helps - you should separate Cypress types from Mocha types using a subfolder with its own tsconfig.json file. Even putting tsconfig.json in cypress folder should work I beleve. See this page for how to do it https://basarat.gitbooks.io/typescript/docs/testing/cypress.html