Cypress and cy undefined in commands.js, but everything works

Question

When typing a custom command into commands.js, WebStorm's linter says that both Cypress and cy are undefined and does not provide any IntelliSense. Both are perfectly defined in any integration files.

commands.js

Cypress.Commands.add('command', () => {
  cy.get('div');
});

// ESLint: 'Cypress' is not defined.(no-undef)
// ESLint: 'cy' is not defined.(no-undef)

index.js

import './commands.js'

This error does not appear in VSCode. Instead both Cypress and cy are defined as any.

Regardless of this error, however, the tests work fine.

What can I do to have the linter recognize Cypress in its own files?

score 6 · Accepted Answer · answered Jul 11 '21 at 16:16

I found some solutions.

Add reference

Put this at the top of each file test script

/// <reference types="cypress" />

Eslint extension

yarn add -D eslint-plugin-cypress (https://github.com/cypress-io/eslint-plugin-cypress)
Add these lines to .eslintrc

{
  "extends": [
    "plugin:cypress/recommended"
  ]
}

Specify cy in eslintrc globals

{
  "globals": {
    "cy": true
  }
}

Add this to .eslintrc

cy is a global variable. Much like location. So really it is window.cy. You can add it to the globals in Eslint. Don't import cy from cypress.

Reference: ESLint: 'cy' is not defined (Cypress)

Thank youy. I did try solutions I found online but I must have done something wrong. Your solutions fixed my problem. — Ronny Efronny, Jul 12 '21 at 06:01

Cypress and cy undefined in commands.js, but everything works

1 Answers1

Add reference

Eslint extension

Specify cy in eslintrc globals