cypress: support folder doesn't support TypeScript

I converted .js files in cypress/support folder to .ts files and the Cypress app no longer found them. Converting back to JS the app found them again. I tried digging through the source code to see if it is a configuration option, but I couldn’t find anything. The current workaround is to just have the JS file with a .d.ts file separately for the command types. Cypress understands TypeScript files in cypress/integration just fine. If I make the index file a JS file and imported files TS files, it gives an error “cannon file modules”.

• Operating System: OSX
• Cypress Version: 1.4
• Browser Version: Chrome 62

Is this a Feature or Bug?

Bug?

Current behavior:

TypeScript files aren’t recognized in cypress/support

Desired behavior:

Support files written in TypeScript are recognized

How to reproduce:

Change a support file to a *.ts file and restart Cypress. When I do this the file is not picked up by Cypress anymore.

Cypress team solution

See example project with working TS support and spec files https://github.com/bahmutov/cypress-support

• point Cypress at the TypeScript support file from cypress.json config

{
  "supportFile": "cypress/support/index.ts"
}

• install TypeScript and @bahmutov/add-typescript-to-cypress - this will configure transpiling .ts files during testing
• when adding custom commands, add them to the cy global interface. TypeScript compiler is smart enough to merge your definitions with the cy type from node_modules/cypress module. For example

/**
 * Goes to google site
 */
function google() {
  return cy.visit('https://google.com');
}

Cypress.Commands.add('google', google);

declare namespace Cypress {
  interface Chainable<Subject> {
    google: typeof google;
  }
}

The only thing TypeScript cannot do - if one of your custom commands calls another custom command, then tsc does not understand that the new command will be there. In other words this does not work and requires casting cy as any to work

function foo() {} // first custom command to be added
function bar() {
  cy.foo() // error: cy does not have method "foo" :(
}

Cypress.Commands.add('foo', foo);
Cypress.Commands.add('bar', bar);

declare namespace Cypress {
  interface Chainable<Subject> {
    foo: typeof foo;
    bar: typeof bar;
  }
}

In that case I suggest extracting custom foo command into plain function and not attaching it to the cy interface.