TS and Cypress compatibility issues

[jordandlaman]

Having difficulty getting this working with the typescript variant of cypress. Also looks like the new version of cypress doesn't like you wrapping commands as the example errors out on run. Main problem I am getting is that there are no type defs and cypress is saying the snapshotmatching commands are not chainable off the cy namespace.

[jackjocross]

Thanks for pointing out that issue! I recently published some fixes but forgot to upgrade the dependencies in the example, just merged #14 to fix that.

I also use Cypress with TypeScript and need to get around to publishing some types for this package. Until then I think adding the following declaration to cypress/support/commands.ts should work:

declare global {
  namespace Cypress {
    interface Chainable {
      matchImageSnapshot: (options? : any) => void;
    }
  }
}

[jordandlaman]

Thanks for the feedback! I get Error: Cannot find module './commands' from '/Users/m54148/sites/cypriot/cypress/support' when running the spec. Renaming cypress/support/index.js with the import './commands' to a .ts file pops the ts error that cy.matchImageSpanshot(); is not chainable again. Did you run into this before when globally declaring the namespace?

[jackjocross]

Interesting, I did have a couple of issues setting up TypeScript with Cypress that were resolved by a combination of tsconfig.json changes and declaring the namespace I shared.

That said our TypeScript environments could be different. It might help to see if you can get any custom command working, something like:

declare global {
  namespace Cypress {
    interface Chainable {
      getTypeScriptWorking: typeof getTypeScriptWorking;
    }
  }
}

function getTypeScriptWorking() {
	console.log('It works!');
}

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

And then try adding matchImageSnapshot afterwards, that way you can pick apart the errors related to this package vs. general TypeScript with Cypress issues.

[jordandlaman]

Yeah so calling declare global TS doesn't like that. I can run custom commands using

// tslint:disable-next-line:no-namespace
declare namespace Cypress {
        // tslint:disable-next-line interface-name
        interface Chainable {
            foo: () => string
        }
}

But still doesn't fix trying to import in that file.

[jordandlaman]

I am gonna close this as this is potentially on cypress or my env. Would be nice to have a milestone for type defs.

[cdeutsch]

To get it to work, I ended up adding this file to my custom types directory
types/cypress-image-snapshot/index.d.ts

import Cypress from 'cypress';

declare global {
  namespace Cypress {
    interface Chainable {
      matchImageSnapshot: (options?: any) => void;
    }
  }
}

Then in tsconfig.json add:

{
  ...
  "files": [
    "types/cypress-image-snapshot/index.d.ts"
  ]
}

And if you have @types/jest-image-snapshot installed you can do this instead:

import Cypress from 'cypress';
import { MatchImageSnapshotOptions } from 'jest-image-snapshot';

declare global {
  namespace Cypress {
    interface MatchImageSnapshotOptions extends MatchImageSnapshotOptions, Partial<ScreenshotOptions> {}

    interface Chainable {
      matchImageSnapshot(options?: MatchImageSnapshotOptions): void;
      matchImageSnapshot(fileName: string, options?: MatchImageSnapshotOptions): void;
    }
  }
}

Hopefully that helps someone 👍

[jordandlaman]

Went with the jest option. Works great. Cheers!

[Keysox]

I went ahead and added typings for folks to use: DefinitelyTyped/DefinitelyTyped#41222

Now, all you need to do is yarn add @types/cypress-image-snapshot -D for this plugin to work with TypeScript!