'cy' is not defined no-undef warning message

[danikova]

It works in the interactive mode and it works well when running in headless mode.
But I constantly get this 'cy' is not defined no-undef warnings, which I think it's annoying.

% npm run cy:run -- -b chrome --component --spec "src/Stepper.cy.jsx" 

> webapp@0.1.0 cy:run
> cypress run "-b" "chrome" "--component" "--spec" "src/Stepper.cy.jsx"

Couldn't find tsconfig.json. tsconfig-paths will be skipped
[@cypress/webpack-dev-server]: removing HtmlWebpackPlugin from configuration.
[@cypress/webpack-dev-server]: removing HotModuleReplacementPlugin from configuration.
ℹ ｢wds｣: Project is running at http://localhost:63340/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /__cypress/src
ℹ ｢wds｣: Content not from webpack is served from ***

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        10.3.1                                                                         │
  │ Browser:        Chrome 103 (headless)                                                          │
  │ Node Version:   v16.15.0 ***                                                                   │
  │ Specs:          1 found (Stepper.cy.jsx)                                                       │
  │ Searched:       src/testsessions/Stepper.cy.jsx                                                │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  Stepper.cy.jsx                                                                  (1 of 1)
ℹ ｢wdm｣: wait until bundle finished: /__cypress/src/index.html
ℹ ｢wdm｣: Failed to compile.
✖ ｢wdm｣:    3128 modules

ERROR in ./src/Stepper.cy.jsx
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

  Line 10:5:   'cy' is not defined  no-undef
  Line 14:5:   'cy' is not defined  no-undef
  Line 15:5:   'cy' is not defined  no-undef
  Line 19:5:   'cy' is not defined  no-undef
  Line 20:5:   'cy' is not defined  no-undef
  Line 24:5:   'cy' is not defined  no-undef
  Line 25:5:   'cy' is not defined  no-undef
  Line 26:5:   'cy' is not defined  no-undef
  Line 30:5:   'cy' is not defined  no-undef
  Line 31:5:   'cy' is not defined  no-undef
  Line 32:5:   'cy' is not defined  no-undef
  Line 36:5:   'cy' is not defined  no-undef
  Line 37:5:   'cy' is not defined  no-undef
  Line 38:5:   'cy' is not defined  no-undef
  Line 39:5:   'cy' is not defined  no-undef
  Line 40:5:   'cy' is not defined  no-undef
  Line 41:5:   'cy' is not defined  no-undef
  Line 45:25:  'cy' is not defined  no-undef
  Line 46:5:   'cy' is not defined  no-undef
  Line 47:5:   'cy' is not defined  no-undef
  Line 48:5:   'cy' is not defined  no-undef

Search for the keywords to learn more about each error.


  <Stepper>
    ✓ mounts (74ms)
    ✓ stepper should default to 0 (59ms)
    ✓ supports an "initial" prop to set the value (33ms)
    ✓ when the increment button is pressed, the counter is incremented (229ms)
    ✓ when the decrement button is pressed, the counter is decremented (154ms)
    ✓ when clicking increment and decrement buttons, the counter is changed as expected (363ms)
    ✓ clicking + fires a change event with the incremented value (144ms)


  7 passing (1s)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        7                                                                                │
  │ Passing:      7                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     1 second                                                                         │
  │ Spec Ran:     Stepper.cy.jsx                                                                   │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF                                                     
  -  Finished processing: ***/cypress/videos/Stepper.cy    (3 seconds)
                          .jsx.mp4                                                                  


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  Stepper.cy.jsx                           00:01        7        7        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:01        7        7        -        -        -  

Stepper.jsx is similar to what can be found in the component testing guide.

Stepper.cy.jsx is similar too:

import React from 'react';
import Stepper from './Stepper';

const counterSelector = '[data-cy=counter]'
const incrementSelector = '[aria-label=increment]'
const decrementSelector = '[aria-label=decrement]'

describe('<Stepper>', () => {
  it('mounts', () => {
    cy.mount(<Stepper />)
  })

  it('stepper should default to 0', () => {
    cy.mount(<Stepper />)
    cy.get(counterSelector).should('have.text', '0')
  })

  it('supports an "initial" prop to set the value', () => {
    cy.mount(<Stepper initial={100} />)
    cy.get(counterSelector).should('have.text', '100')
  })

  it('when the increment button is pressed, the counter is incremented', () => {
    cy.mount(<Stepper />)
    cy.get(incrementSelector).click()
    cy.get(counterSelector).should('have.text', '1')
  })

  it('when the decrement button is pressed, the counter is decremented', () => {
    cy.mount(<Stepper />)
    cy.get(decrementSelector).click()
    cy.get(counterSelector).should('have.text', '-1')
  })

  it('when clicking increment and decrement buttons, the counter is changed as expected', () => {
    cy.mount(<Stepper initial={100} />)
    cy.get(counterSelector).should('have.text', '100')
    cy.get(incrementSelector).click()
    cy.get(counterSelector).should('have.text', '101')
    cy.get(decrementSelector).click().click()
    cy.get(counterSelector).should('have.text', '99')
  })

  it('clicking + fires a change event with the incremented value', () => {
    const onChangeSpy = cy.spy().as('onChangeSpy')
    cy.mount(<Stepper onChange={onChangeSpy} />)
    cy.get(incrementSelector).click()
    cy.get('@onChangeSpy').should('have.been.calledWith', 1)
  })
})

I've tried to fix this with an .eslintrc.json what i found from a similar discussion but I had no luck.

{
  "globals": {
    "it": "readonly",
    "describe": "readonly",
    "cy": "readonly"
  }
}

[stavares843]

hello! 👋

have you tried this plugin as suggested here?

[danikova]

Hi, thanks for your suggestion, so I installed this eslint-plugin-cypress package, but sadly the cli output is stayed the same.

[Saniyakubu]

@danikova please have you found solution for this ?