Wrong TS signature for Cypress.Commands.add

[IlCallo]

Current behavior:

Current signature expect Cypress.Commands.add to return void.
This is incorrect, as you see by adding the example command you provide in docs:
https://docs.cypress.io/guides/tooling/typescript-support.html#Types-for-custom-commands

That command returns a Chainable, which TS marks as error because the signature doesn't expect any return value.

Desired behavior:

Avoid TS errors, as it actually works fine.

Test code to reproduce

Your dataCy snippet.

Versions

TS: 1.8.3
Cypress: 4.7.0
Linux: 18.04

[sainthkh]

I'm working on this at #7547. But the problem is that I can understand the cause of the problem while I cannot reproduce the problem. Because of that, I cannot create a correct automated tests.

Could you give us the copy of the tsconfig.json of the project or a sample repo?

[IlCallo]

I'm using a dedicated tsconfig for Cypress which extends the root one, which extends the Quasar Framework preset

{
  "extends": "../../tsconfig",
  "compilerOptions": {
    // Importing "cypress" types into project-root tsconfig won't work for unknown reasons,
    //  using folder-local tsconfig is better to avoid globals conflicts (eg. with Jest)
    "types": ["cypress"]
  }
}

Where root tsconfig

{
  "extends": "@quasar/app/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": "."
}

And Quasar preset is https://github.com/quasarframework/quasar/blob/dev/app/tsconfig-preset.json

But the error is a normal wrong signature error, it shouldn't be related with my particular configuration AFAIK

[sainthkh]

I don't know why it is not reproducible. I tried it in this order.

1. mkdir 7510 && cd 7510
2. npm i cypress typescript
3. Open 7510 and create index.ts with the content below:

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

Cypress.Commands.add('dataCy', (value) => {
  return cy.get(`[data-cy=${value}]`)
})

4. npx tsc ./index.ts --noEmit --lib dom,es6 --strict
5. Nothing happens.

I installed @quasar/app and copied your tsconfig.json. But nothing happened, either.

[IlCallo]

And is the type of Cypress.Commands.add correct? Maybe I'm using an older version of the package and now it accepts a value different than void.

I cannot find those types in this repo, I guess they are generated

[sainthkh]

No, it has not been changed.

https://github.com/cypress-io/cypress/blob/develop/cli/types/cypress.d.ts#L348

[IlCallo]

Oh, I see, you probably don't get the error because you don't have TS-ESLint in place.
My bad, I said it was a "TS error", but it's actually a "ESLint TS error", in particular a violation of @typescript-eslint/no-misused-promises, as you can see from the initial image I provided.

My ESLint config:

const { resolve } = require('path');
module.exports = {
  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
  // This option interrupts the configuration hierarchy at this file
  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
  root: true,

  // https://eslint.vuejs.org/user-guide/#how-to-use-custom-parser
  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
  parserOptions: {
    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#configuration
    // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#eslint
    // Needed to make the parser take into account 'vue' files
    extraFileExtensions: ['.vue'],
    parser: '@typescript-eslint/parser',
    project: resolve(__dirname, './tsconfig.json'),
    tsconfigRootDir: __dirname,
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },

  env: {
    browser: true
  },

  // Rules order is important, please avoid shuffling them
  extends: [
    // Base ESLint recommended rules
    'eslint:recommended',

    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
    // ESLint typescript rules
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    // consider disabling this class of rules if linting takes too long
    'plugin:@typescript-eslint/recommended-requiring-type-checking',

    // Uncomment any of the lines below to choose desired strictness,
    // but leave only one uncommented!
    // See https://eslint.vuejs.org/rules/#available-rules
    // 'plugin:vue/essential', // Priority A: Essential (Error Prevention)
    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
    'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)

    // https://github.com/prettier/eslint-config-prettier#installation
    // usage with Prettier, provided by 'eslint-config-prettier'.
    'prettier',
    'prettier/@typescript-eslint',
    'prettier/vue'
  ],

  plugins: [
    // required to apply rules which need type information
    '@typescript-eslint',

    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
    // required to lint *.vue files
    'vue'

    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
    // Prettier has not been included as plugin to avoid performance impact
    // add it as an extension for your IDE
  ],

  globals: {
    ga: true, // Google Analytics
    cordova: true,
    __statics: true,
    process: true,
    Capacitor: true,
    chrome: true
  },

  // add your custom rules here
  rules: {
    'prefer-promise-reject-errors': 'off',

    // TypeScript
    quotes: ['warn', 'single'],
    '@typescript-eslint/explicit-function-return-type': 'off',

    // allow debugger during development only
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
};

Relevant deps

{
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore ./"
  },
  "dependencies": {
    "@quasar/extras": "^1.8.1",
    "quasar": "^1.12.0"
  },
  "devDependencies": {
    "@quasar/app": "^1.8.6",
    "@quasar/quasar-app-extension-testing-e2e-cypress": "^1.0.0-beta.12",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-plugin-vue": "^6.1.2",
  }
}

If you create a new project using Quasar Framework (selecting ESLint and TS support) and add the beta cypress App Extension (selecting TS support), you should see the problem.

yarn global add @quasar/cli
quasar create test
cd test
quasar ext add @quasar/testing-e2e-cypress@beta
yarn test:e2e

Or check the generated test/cypress/support/commands.js file

[sainthkh]

Thanks for the info. I finally reproduced it and created a test for that.

[cypress-bot]

The code for this is done in cypress-io/cypress#7547, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[jennifer-shehane]

Released.

This comment thread has been locked as resolved.