1

I'm a complete Cypress newbie working my way through the excellent testing your first application tutorial. However I've started to hit some compiler issues in the third section.

I've created a custom command as instructed, but am getting the following compiler error:

enter image description here

This Stack Overflow article seems to suggests adding export {} to my file.

If I do this the compiler error goes away in the commands.ts file but causes the introduction of the same error in another file. If I add the same export {} line this pushes the error to a new file. After repeating the cycle a few times eventually I end up with this error:

enter image description here

Can anybody provide me with any help that's aimed at a beginner? I'm struggling to know how to progress and was making good progress up to this point

Giacomo
  • 163
  • 10
cw84
  • 2,111
  • 5
  • 24
  • 37

2 Answers2

4

Adding export {} to the file is ok if you just want to get over the problem, but it's a bit of a hack - nobody designs a system to us a fake export to designate the file type.

The problem is likely in the tsconfig setup, check out Typescript - What is a tsconfig.json (the Cypress docs are a bit light on the typescript side of things).

Also compare your setup to cypress-realworld-app as it's a working implementation.

In the last file, I think your problem is the export is before the typings comment, try reversing them

/// <reference types="cypress" />
export {}

Also see the 2nd answer on Why is --isolatedModules error fixed by any import?, it seems it's good practice to have a tsconfig at the /cypress folder level just for tests. The realworld app also uses this pattern.

Giacomo
  • 163
  • 10
0

Rename your cypress/index.ts file to cypress/cypress.d.ts. You don't need reference or export there.

Here's an example of my cypress.d.ts file:

declare global {
  namespace Cypress {
    interface Chainable {
      getByTestId(value: string): Chainable<JQuery<HTMLElement>>;
    }
  }
}

I highly recommend following the official tutorial in part of adding a separate tsconfig in cypress folder. IT's important to not have anything related to cypress in your main tsconfig.

undefined
  • 98
  • 4