cypress-file-upload: [Bug] Unable to upgrade to ES6 in my TypeScript project

Current behavior:

Setting "target": "ES6" in tsconfig.json will highlight upload() with the error “Property ‘upload’ does not exist on type ‘Chainable<JQuery<HTMLElement>>’”, as if VS Code cannot find the module. Setting "target": "ES5" works just fine.

Desired behavior:

I want to be able to upgrade target to ES6.

Steps to reproduce: (app code and test code)

tsconfig.json:

{
    "compilerOptions": {
        "strict": true,
        "target": "ES6",
        "types": ["cypress"]
    },
    "include": ["**/*.ts"],
    "exclude": ["/node_modules/"]
}

Cypress test file:

import 'cypress-file-upload';

context('aaa', () => {
    it('bbb', () => {
        cy.fixture('abc').then(fileContent => {
            cy.get('def').upload(fileContent)
        })
    })
})

Versions

Cypress: 3.8.3 and newer (never tried any older versions) cypress-file-upload: 3.5.3 Visual Studio code: 1.42.1

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 18 (4 by maintainers)

Most upvoted comments

I was running in to a problem where my editor (vscode) was recognizing that .attachFile was the appropriate command but the cypress test-runner was throwing a type error in the console and in the runner UI. I noticed that this library contained the appropriate namespace in the library but for some reason it wasn’t being recognized.

I had to explicitly include the library in my tsconfig.json inside my cypress directory:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "noEmit": false,
    "isolatedModules": false
  },
  "include": [
    "../node_modules/cypress",
    "../node_modules/cypress-file-upload",
    "**/*.ts",
    "**/*.js"
  ]
}

stphnlngdncoding on Aug 1, 2020

I ran npm update to update to version 4.0.3.

Property ‘attachFile’ does not exist on type ‘Chainable<JQuery<HTMLElement>>’.

Regnander on Mar 24, 2020

The fix necessary for me (which I just realized, after totally missing before) was to add cypress-file-upload into the types field of the tsconfig.json for cypress.

So, my tsconfig needs the following block in compilerOptions:

{
  "compilerOptions": {
    "types": ["cypress", "cypress-file-upload"]
  }
}

This is working for me with latest cypress-file-upload version, 4.1.1. Curious if this also works for others in this thread?

peterkrieg on Sep 9, 2020

Unfortunately, I’m still seeing this error, with upgrading to cypress-file-upload 4.0.6: Property 'attachFile' does not exist on type 'Chainable<JQuery<HTMLElement>>'

I’ll try and dig into what’s going on later! Weird because if I just copy the same declaration into my support/index.d.ts (cypress local types) it doesn’t have the error. 🤔

peterkrieg on Apr 13, 2020

We also have this issue with "target": "esnext"

Glinkis on Mar 11, 2020

Unfortunately don’t have anything public since it’s code at work. But I’ll try and put together a minimum reproducible example!

peterkrieg on Apr 13, 2020

Excellent, looks like I don’t need to bother with the PR, as @jdcl32 included the fix mentioned above in PR #187. I’ve confirmed that v4.0.6 no longer shows the issues mentioned above on my system.

@abramenal, as far as I can see this issue can now be closed again, but like I said I’ve never been able to replicate the v3.5.3 problem so maybe there’s something slightly different in my setup.

Thanks again @jdcl32 for the fix!

yonigibbs on Apr 13, 2020

I’ve tried v4.0.5 in both IntelliJ and VSCode and both highlight the same problem with the Chainable interface defined in cypress-file-upload: it’s declared twice, with a different generic type parameter in each one (see #182). The IDE warning can be seen by opening index.d.ts in the node_modules/cypress-file-upload folder. I believe this duplication, which has been in the code in a couple of the v4.0.x releases, might be at least partly related to the original issue logged here (e.g. when I use v4.0.3 I can see some of the errors shown above).

If I update index.d.ts in cypress-file-upload and simply remove the 2nd definition, all warnings in both IDEs disappear, and the problem originally logged in this issue here also does not recur, at least in my environment. So from what I can see we simply need to remove the second declaration of the Chainable interface.

However, I’m not 100% sure about this, as I haven’t been able to replicate the original issue logged here, when using v3.5.3. So I suspect my setup could be different is in some way. Has someone got a repo where this issue can be replicated? If so I’m happy to take a look.

Failing that, I’ll create a PR for this early next week to remove that duplicate definition, unless someone else thinks this isn’t the right solution?

yonigibbs on Apr 10, 2020