Cypress-testing-library with typescript

[YoavSch]

Cypress-testing-library not working with typescript.

[YozhEzhi]

With Cypress-testing-library I haven't ability to fall in through to method declaration.
Native Cypress get method:

Cypress-testing-library helper:

Are there some settings I should do to have ability to work with typings for Cypress-testing-library API?

[kentcdodds]

Sorry, I don't use typescript :-/ I don't know what could be wrong.

[sompylasar]

Wrong are missing typings for the mixed-in functions. Someone needs to adds typings to describe the additional functions this library attaches to the cy object.

[YozhEzhi]

I guess this typings will be enough.
https://github.com/kentcdodds/dom-testing-library/tree/master/typings

[sompylasar]

@YozhEzhi Yes, but not literally these files.

[aaronmcadam]

If we can get the right typings, we can configure our tests to use them by adding the name of the package to the types array in compilerOptions in tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "cypress-testing-library"]
  }
}

[aaronmcadam]

@sompylasar Do you know of a good way we can share the types from dom-testing-library, but add them to the cy object's interface?

[aaronmcadam]

@bahmutov Could you provide any guidance here?

[aaronmcadam]

I've tried the following, which at least stops the error showing up:

declare global {
  namespace Cypress {
    interface Chainable<Subject = any> {
      getByTestId<S = string>(x: string): Chainable<S>;
    }
  }
}

[sompylasar]

@aaronmcadam Try importing queries from dom-testing-library and make Cypress interface extend from it or somehow declare Cypress interface as an intersection type of the original interface and queries object. Maybe an interface containing all the functions will need to be declared in dom-testing-library, and exports declared to implement it, instead of plain export function. Don't know exactly how.

[sompylasar]

@aaronmcadam I gave it a secont thought, and the answer is no, you should not reuse from dom-testing-library because the function signatures differ (e.g the return value type), cypress-testing-library provides wrapper functions around dom-testing-library which are not the functions exported from dom-testing-library. Copying the definitions and changing the types to match the wrapper signatures is the right way. Although maybe there is already an automated type mapping in recent TypeScript so maybe this can be used to map them (but this means it'll require latest TypeScript to read these definitions).

[aaronmcadam]

Hi @sompylasar! Thanks for your thoughts, that helps a lot. I've started #16 to try to work out how to solve this. Could you take a look? I'm a bit unsure on how best to implement this in a maintainable way.

[sompylasar]

@aaronmcadam Reviewed, thanks.

I'm a bit unsure on how best to implement this in a maintainable way.

Yes I'm not sure either. The functions from dom-testing-library are mapped dynamically into cypress commands (function wrappers) in cypress-testing-library by looping over the queries object, but they need static typing. Unless there's a way to statically map types of dom-testing-library functions into types of cypress-testing-library custom command functions, the list of functions will have to be maintained and kept in sync manually.

[freddydumont]

What's the status on this issue? Anything a non-typescript user can do to help? The problem I encounter is that it breaks the cy object auto-completion when chaining with this library.

[kentcdodds]

I'm not personally actively working on this issue. I don't track typescript issues very closely myself.

[aaronmcadam]

Hi @freddydumont I'm waiting on some feedback as to whether these types are correct. I do use TypeScript daily but I'd like some feedback from a maintainer

[aaronmcadam]

The PR is here: #16

[freddydumont]

Thanks for the replies guys. So who could review your PR? @sompylasar ?

[aaronmcadam]

Yeah it needs another look from him @freddydumont

[sompylasar]

@aaronmcadam @freddydumont Sorry haven't had time to look earlier, PR approved, assuming you checked that it works, I can't test it myself as I don't have a Cypress+TypeScript setup at hand.

[sompylasar]

Also the cypress-testing-library might need to be updated to the latest dom-testing-library, its public API has updated recently in some regards (don't remember if the changes affect the queries anyhow), please have a look at recent changes.

[kentcdodds]

🎉 This issue has been resolved in version 2.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀