question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript: Cannot both import onlyOn and use cy.onlyOn

See original GitHub issue

In v2.6.0, Typescript threw errors when onlyOn was imported, but worked correctly for cy.onlyOn. Now in v2.6.1 (after https://github.com/cypress-io/cypress-skip-test/pull/143), Typescript correctly types the onlyOn import, but cy.onlyOn does not have a type.

Is there any way to get both of these to work with Typescript?

import { onlyOn } from '@cypress/skip-test'; // error here in 2.6.0: File '.../node_modules/@cypress/skip-test/index.d.ts' is not a module.
onlyOn('integration', () => {
  describe('stuff', () => {
    cy.onlyOn('mac'); // Error here in 2.6.1: Property 'onlyOn' does not exist on type 'cy & EventEmitter'
  })
});

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
conversaShawncommented, Oct 17, 2021

I was able to successfully import both by exporting the global scope in my support/index.d.ts.

Try the following:

export {};

declare global {
  namespace Cypress {
    // ... type definitions
  }
}

You can also find a minimal reproducible example here: https://github.com/conversaShawn/using-cypress-skip-test-plugin/tree/onlyOn

0reactions
muratkeremozcancommented, Dec 29, 2022

Add to your cypress.d.ts file

export {}

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      /// plugins ///

      // the cypress skip-test plugin has an open issue with types, that is  we have declare these here
      // https://github.com/cypress-io/cypress-skip-test/issues/164
      /** https://www.npmjs.com/package/@cypress/skip-test
       * `cy.skipOn('sandbox')`
       */
      skipOn(
        nameOrFlag: string | boolean | (() => boolean),
        cb?: () => void,
      ): Chainable<Subject>
      /** https://www.npmjs.com/package/@cypress/skip-test
       * `cy.onlyOn('sandbox')`
       */
      onlyOn(
        nameOrFlag: string | boolean | (() => boolean),
        cb?: () => void,
      ): Chainable<Subject>

    }
  }
}

Read more comments on GitHub >

github_iconTop Results From Across the Web

Typescript error when importing from @cypress/skip-test #91
Importing like this import { onlyOn, skipOn } from '@cypress/skip-test'; ... Got error when using TypeScript too. Using. cy.
Read more >
Cypress doesn't see custom cy. commands - Stack Overflow
Here is how I get TypeScript to see my custom commands: commands.ts declare namespace Cypress { interface Chainable<Subject> ...
Read more >
Best Practices - Cypress Documentation
Best Practice: Use data-* attributes to provide context to your selectors and isolate them from CSS or JS changes. Every test you write...
Read more >
Use TypeScript With Cypress - Gleb Bahmutov
How to write Cypress.io end-to-end tests in TypeScript is a question that comes up again ... VSCode cannot find global variable cy anymore....
Read more >
The 32+ ways of selective testing with Cypress: a unified ...
Handle the environments in config files, and define a custom environment variable · Abstract away the logic in the test · Use it...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found