ESLint: 'cy' is not defined (Cypress)

Question

I've just started using Cypress with my React Typescript project. I've gotten some simple tests to run:

describe('settings page', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000')
  });
  it('starts in a waiting state, with no settings.', () => {
    cy.contains('Waiting for settings...')
  });
  it('shows settings once settings are received', () => {
    const state = cy.window().its('store').invoke('getState')
    console.log(state) // different question: how do I get this to be the state and not a $Chainer?
  });
});

It runs in Cypress just fine. But I get Typescript errors in Webstorm, saying that cy is not defined (a TS and ESlint error) and an error on describe saying all files must be modules when the --isolatedModules flag is provided.

I can make it a JS file instead of a TS file, then I still get cy is not defined.

I've tried import cy from 'cypress' but then I get ParseError: 'import' and 'export' may appear only with 'sourceType: module' which is a whole other can of worms (I'm taking baby steps in writing my tests and haven't had to import anything yet...)

/// <reference types="cypress" /> does not work.

Update (sort of)

I've followed instructions here and have made a little progress. To my already very full React webpack.config.dev.js I added the recommended code:

          { // TODO inserted for cypress https://stackoverflow.com/a/56693706/6826164
            rules: [
              {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
              }
            ]
          },

to the end of the list of rules (just before the file loader).

When I do this as well as setting up the plugins/index file as indicated in the article, the cypress "home screen" runs but when I click to open my tests, it takes very many seconds and then shows lots of errors, starting with

integration\settings.spec.ts
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

A missing file or dependency
A syntax error in the file or one of its dependencies
Fix the error in your code and re-run your tests.

./cypress/integration/settings.spec.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for C:\Users\...\...\front_end\cypress\integration\settings.spec.ts.
 @ multi ./cypress/integration/settings.spec.ts main[0]

Followed by, actually, a lot of Typescript output such as this:

C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx
[tsl] ERROR in C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx(37,41)
      TS2339: Property 'toBeTruthy' does not exist on type 'Assertion'.

C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx
[tsl] ERROR in C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx(41,45)
      TS2339: Property 'toBeDefined' does not exist on type 'Assertion'.

Notice that these are now errors for code outside the test files (although perhaps that makes sense). Many of them are for files in which I'm using Jest rather than Cypress, and many errors, as you can see, seem to be related to it inferring an Assertion type on expect that is not Jest, such that it thinks the toEqual matcher is wrong.

All the while, in Webstorm ESLint is still complaining about all my cy and TypeScript is underlining all those Jest assertions mentioned in the output.

This is all with a ts test file. If I rename the file to js, it says the file has no tests.

Any help? I love Cypress but I'm having a hell of a time getting it to work fully!

Hi, I want to ask about eslint, so I need to implement eslint into my cypress project and add eslint-plugin-cypress as well? right? — monti, Oct 07 '22 at 03:24

score 152 · Answer 1 · answered Feb 10 '20 at 16:19

152

I got that error after upgrading to cypress version 4+. I installed the eslint-plugin-cypress https://github.com/cypress-io/eslint-plugin-cypress and activated it in the extends configuration either in package.json or in separate config file:

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

answered Feb 10 '20 at 16:19

alex

1,999
3
16
18

1

2 yr old answer but still working. Thanks! – Kid Feb 14 '22 at 15:25
Still the correct answer! – volume one Apr 06 '22 at 13:26
Still correct answer, but in 2022 i had to edit .eslintrc – Jack Jul 28 '22 at 07:12
1

Still works. `npm install -D eslint-plugin-cypress` and add it in .eslintrc.js – Alonso Pablo Nov 25 '22 at 12:43

score 94 · Answer 2 · answered May 26 '20 at 10:39

94

Add .eslintrc.json to cypress directory

In .eslintrc.json

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

I do not install eslint-plugin-cypress, and it fix the problem

answered May 26 '20 at 10:39

Omer

3,232
1
19
19

10

You need to install the plugin. The reason it looks like the problem is fixed is because ESLint will error out and stop linting the directory so all the warnings disappear. It looks like you're using VSCode, so you can click the ESLint tab in the bottom right to verify this. – CudB Jun 09 '20 at 22:13
Still I get this error Module build failed (from ./node_modules/cypress-plugin-tab/src/index.js): ReferenceError: Cypress is not defined – Ashok kumar Ganesan Feb 17 '21 at 12:35
Can you look at this [question](https://github.com/Shelex/cypress-allure-plugin/issues/49) – Ashok kumar Ganesan Feb 22 '21 at 06:13
Doesn't work ERROR in [eslint] Failed to load plugin 'cypress' declared in '.eslintrc': Cannot find module 'eslint-plugin-cypress' – Nikolay Advolodkin Sep 30 '22 at 13:40

score 25 · Answer 3 · answered Jul 30 '20 at 16:26

25

Specify `cy` in eslintrc globals

Answered here

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.

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

Added that to my .eslintrc and fixed the issue

answered Jul 30 '20 at 16:26

Adam Caron

371
3
7

Many thanks. Works for me without plugin install and import cy. – Wirat Leenavonganan Dec 31 '21 at 23:40

score 12 · Answer 4 · answered Feb 18 '21 at 20:52

The Cypress ESLint plugin will get rid of these warnings:

yarn add -D eslint-plugin-cypress (https://github.com/cypress-io/eslint-plugin-cypress)
add .eslintrc to the root of your project with the following:

{
    "plugins": ["cypress"],
    "extends": ["plugin:cypress/recommended"],
    "rules": {
        "jest/expect-expect": "off"
    }
}

CodeWorld · Answer 5 · 2023-06-07T05:59:08.583

12

I struggled a lot then this helped...
by adding this one line in either of two config files, eslintrc.json or eslintrc.js
(if u have other dependencies in extends, append them as well after it)

extends: ['plugin:cypress/recommended'],

edited Jun 07 '23 at 05:59

answered Nov 19 '21 at 09:06

CodeWorld

2,017
1
11
21

1

and don't forget run - yarn add eslint-plugin-cypress --dev – Andrey Patseiko Jul 14 '22 at 12:58
Why do you have two eslint config files? – Spikatrix Jan 10 '23 at 13:01
@Spikatrix plz feels free to configure one only. – CodeWorld Jan 13 '23 at 11:46
1

@CodeWorld Yes, but your answer says two config files. I was just wondering why that would be the case. – Spikatrix Jan 13 '23 at 12:22
@Spikatrix Actually that's silly me. Since I found it after lot of struggle and it was working, so I followed the motto don't touch what is working. (But whatever you are suggesting is definitely more correct) – CodeWorld Jan 17 '23 at 05:42
It could be in your `package.json` config for the same too like this: "eslintConfig": { "extends": [ "plugin:cypress/recommended" ] } – myyk Jul 12 '23 at 08:18

score 10 · Answer 6 · answered Apr 23 '20 at 17:37

10

Try.. import cy from "cypress" this solved the problem for me.

answered Apr 23 '20 at 17:37

Noah Franco

139
1
6

4

Hi, welcome to stack-overflow . you can use this link for improve your answer https://stackoverflow.com/help/how-to-answer and https://stackoverflow.com/tour – Amirhossein Apr 24 '20 at 04:08

score 8 · Answer 7 · answered Nov 21 '19 at 20:09

8

at the top of your file put

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

or download the official types

source: official cypress intellisense docs

answered Nov 21 '19 at 20:09

voiys

269
5
14

2

Thanks but that's actually not working at all. I also tried downloading @types/cypress and adding it to my tsconfig, and that doesn't help any of the problems. – Jonathan Tuzman Nov 21 '19 at 20:25
Still I get this error Module build failed (from ./node_modules/cypress-plugin-tab/src/index.js): ReferenceError: Cypress is not defined – Ashok kumar Ganesan Feb 17 '21 at 12:30

score 4 · Answer 8 · answered Feb 19 '20 at 15:50

4

Just add these lines to your tsconfig.json file for e2e tests:

"compilerOptions": {
    "types": ["cypress"]
}

This adds support for cypress types.

answered Feb 19 '20 at 15:50

adrisons

3,443
3
32
48

score 2 · Answer 9 · answered Mar 09 '22 at 04:29

2

/* global cy */

import above in your test file

example: suppose you have login test ("cypress test file ex: cypress/integration/login.js")

answered Mar 09 '22 at 04:29

haxora

81
6

1

Is this a complete answer? – May 07 '22 at 17:31
@user17242583 try other above solutions also, all solutions are correct but it depends on various issues, in my case this solution worked. – haxora Jun 28 '22 at 17:23
how does this solution work? where did you get it from please ? – Nicc Jul 08 '22 at 12:49

score 2 · Answer 10 · answered May 19 '22 at 20:32

I replaced the old style of type referencing,

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

with this silly import

import type {} from 'cypress';

And the IDE now both recognizes Cypress's globals while also avoiding the "isolatedModules" issue it has with tsconfig.json

score 1 · Answer 11 · answered Jun 25 '22 at 09:43

Seems I found a remedy that works (at least) for me. Adding this import to the top of the test:

import _Cypress from "cypress";

relaxes and comforts the ESLint plugin. Actually any name for the import can be used instead of "_Cypress": any that conforms your sense of beauty, does not conflict with anything and starts with underscore (to not provoke ESLint again). Of course, it looks like a kind of voodoo. I don't know why it works and probably there are better ways to present ESLint Cypress's globals, but I don't know them.

It probably brings `cypress.d.ts` into scope. – SuchAnIgnorantThingToDo-UKR Jun 25 '22 at 20:04 — SuchAnIgnorantThingToDo-UKR, Jun 25 '22 at 20:04

score 1 · Answer 12 · answered Feb 03 '23 at 13:29

For me adding .eslintignore in root directory and placing *.cy.js for all my test files was only workaround.

It seems that for the rest of us the working solution really is installing eslint-plugin-cypress and adding:

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

but idt didn't helped in my case because this plugin is no longer supported (almost for a year now) so it ended with critical error when combined with cypress-axe.

score 0 · Answer 13 · answered May 18 '22 at 13:17

0

add this to jest.config.js

  testPathIgnorePatterns: [
    '/cypress',
  ],

answered May 18 '22 at 13:17

Ajones

1

score 0 · Answer 14 · answered Jun 30 '22 at 09:05

Wrap your config object with defineConfig in the cypress.confi.ts file like so

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
      return config;
    },
  },

  component: {
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
    },
  },
});

ESLint: 'cy' is not defined (Cypress)

Update (sort of)

14 Answers14

Add .eslintrc.json to cypress directory

Specify `cy` in eslintrc globals

Linked

ESLint: 'cy' is not defined (Cypress)

Update (sort of)

14 Answers14

Add .eslintrc.json to cypress directory

Specify cy in eslintrc globals

Linked

Specify `cy` in eslintrc globals