cypress-localstorage-commands breaks Jest typings

[f4irline]

Describe the bug
So we're using cypress-localstorage-commands in our Angular 2 (9.1.0) project. We're using Jest for unit testing, and cypress-localstorage-commands seems to break the typings that Jest uses.

I have a separate tsconfig for cypress tests and for unit tests. For cypress the path is project-root/cypress/tsconfig.json. Path for unit tests tsconfig is project-root/src/tsconfig.spec.json.

I have imported cypress-localstorage-commands in project-root/cypress/support/index.ts. As soon as I remove the import row, the error above disappears:

When I add the import row back, it appears again.

We're using TypeScript with Cypress as well.

To Reproduce
Import cypress-localstorage-commands as documented in a TypeScript project which uses Jest, and Cypress with Typescript.

Expected behavior
It should use Jest typings.

** Operating system, Node.js an npm versions, or browser version (please complete the following information):**

• OS: Windows 10
• Node.js: 12.13.1
• npm: 6.12.1

[javierbrea]

Please, could you attach your tsconfig.json files in order to try to reproduce the bug? Some extra information as jest and cypress versions could be useful too. Thanks in advance.

[f4irline]

• Jest: v.25.1.0

• @types/jest: v.25.1.2

• @ngneat/spectator: v. 5.0.0 (probably not relevant,)

• Cypress: v.4.11.0

• Cypress-localstorage-commands: v.1.2.1

// project-root/tsconfig.json
{
    "compileOnSave": false,
    "compilerOptions": {
        "module": "esnext",
        "outDir": "./dist/out-tsc",
        "baseUrl": "src",
        "sourceMap": true,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "strict": true,
        "importHelpers": true,
        "strictPropertyInitialization": false,
        "allowUmdGlobalAccess": true,
        "target": "es5",
        "resolveJsonModule": true,
        "downlevelIteration": true,
        "typeRoots": [
            "node_modules/@types",
        ],
        "types": [
            "node",
        ],
        "lib": [
            "es2017",
            "dom"
        ],
        "esModuleInterop": true
    },
    "angularCompilerOptions": {
        "preserveWhitespaces": false
    },
    "plugins": [
        {
            "name": "@angular/language-service"
        }
    ]
}

// project-root/src/tsconfig.app.json
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "leaflet",
      "leaflet.markercluster"
    ]
  },
  "files": [
    "main.ts",
    "polyfills.ts",
    "typings.d.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

// project-root/src/tsconfig.spec.json
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/spec",
        "types": [
            "jest",
            "node",
            "leaflet",
            "leaflet.markercluster"
        ],
        "emitDecoratorMetadata": true,
        "allowJs": true
    },
    "files": ["polyfills.ts"],
    "include": ["**/*.spec.ts", "**/*.d.ts"]
}

// project-root/cypress/tsconfig.json
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "strict": false,
        "baseUrl": "../node_modules",
        "target": "es5",
        "lib": ["es5", "dom"],
        "types": ["cypress"]
    },
    "include": ["**/*.ts"]
}

[javierbrea]

I understand from the description that you are receiving the error in your unit tests files, when you import the cypress-localstorage-commands library in your Cypress files (not related at all, I suppose), even when you have separated config typescript files for cypress files and for unit test files. Am I right?

[f4irline]

I understand from the description that you are receiving the error in your unit tests files, when you import the cypress-localstorage-commands library in your Cypress files (not related at all, I suppose), even when you have separated config typescript files for cypress files and for unit test files. Am I right?

Exactly!

[javierbrea]

Then I suspect that the problem could be related to your tsconfig.json files, because Cypress files should not impact on your unit tests files, probably Cypress files should not be even loaded.

Anyway, I have already created a branch (bug-140-jest-typings) for trying to reproduce the bug, but, before adding all of the dependencies, fake Jest tests, etc. Could you make some little tests for me?

• Replace "include": ["**/*.spec.ts", "**/*.d.ts"] by "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] in the project-root/src/tsconfig.spec.json file. (Let's see if this is producing to load more typescript declaration files than needed)
• Replace "types": ["cypress"] by "types": ["cypress", "cypress-localstorage-commands"] in the project-root/cypress/tsconfig.json file. (Let's try loading the cypress-localstorage-commands declarations as recommended in the library docs)

[f4irline]

Then I suspect that the problem could be related to your tsconfig.json files, because Cypress files should not impact on your unit tests files, probably Cypress files should not be even loaded.

Anyway, I have already created a branch (bug-140-jest-typings) for trying to reproduce the bug, but, before adding all of the dependencies, fake Jest tests, etc. Could you make some little tests for me?

• Replace "include": ["**/*.spec.ts", "**/*.d.ts"] by "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] in the project-root/src/tsconfig.spec.json file. (Let's see if this is producing to load more typescript declaration files than needed)
• Replace "types": ["cypress"] by "types": ["cypress", "cypress-localstorage-commands"] in the project-root/cypress/tsconfig.json file. (Let's try loading the cypress-localstorage-commands declarations as recommended in the library docs)

Could be. Though this is an old project (+2 years in development) and this is the first library which has caused such problems with our current TS configuration. Perhaps I should still investigate this issue some more in our end anyways.

Thanks for the fix suggestions! Unfortunately neither of them fixed the issue. 😕

[javierbrea]

Which version of typescript are you using?

[f4irline]

Which version of typescript are you using?

3.7.5!

[f4irline]

This was actually related to this issue: cypress-io/cypress#1087

I guess when doing import 'cypress-localstorage-commands';, VSCode catches the Cypress namespace and dependencies, including Chai, and my issue happens because Chai's types seem to override Jest's.

My fix was adding my src-folder (which contains all my source code and not cypress tests) to the "include" array in the root tsconfig.json:

// tsconfig.json
{
    ...
    ],
    "include": [
        "src"
    ],    
}

[javierbrea]

Nice to hear that!, thank you very much for the info @f4irline