ESLint: 'cy' is not defined (Cypress)

Question

我刚刚开始在我的React TypeScript项目中使用Cypress。我已经运行了一些简单的测试：

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?
  });
});

在Cypress中运行正常。但是在Webstorm中我收到TypeScript错误，说cy未定义（TS和ESLint错误），并且在--isolatedModules标志提供的情况下，对describe的错误说所有文件必须是模块。

我可以将其变为JS文件而不是TS文件，然后我仍然会得到cy未定义的错误。

我尝试过import cy from 'cypress'，但是我会得到一个完全不同的错误ParseError: 'import' and 'export' may appear only with 'sourceType: module'（我正在逐步编写我的测试，还没有必要导入任何内容...）。

/// <reference types="cypress" /> 无效。

更新（有点）

我按照这里的说明进行了操作，并取得了一些进展。 我已经将建议的代码添加到了我的React webpack.config.dev.js：

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

在规则列表的末尾（文件加载器之前）进行此操作。

当我按照文章中指示设置plugins/index文件时，Cypress“主屏幕”会运行，但是当我点击打开我的测试时，需要很长时间，然后显示大量错误，从以下内容开始：

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]

随后，实际上，有很多TypeScript输出，类似于这样:

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'.

请注意，这些错误现在只针对测试文件外的代码（尽管这可能是有意义的）。其中许多是关于我正在使用Jest而不是Cypress的文件，而且像您所看到的那样，许多错误似乎与它推断出来的期望上的Assertion类型与Jest不同，导致它认为toEqual匹配器是错误的。

同时，在Webstorm中，ESLint仍在抱怨我所有的cy，而TypeScript则在下划线下面显示了所有在输出中提到的Jest断言。

这全部都是在一个ts测试文件中的。如果我将文件重命名为js，则它会说文件中没有测试。

有帮助吗？我喜欢Cypress，但我在让它完全工作方面遇到了巨大的麻烦！

- Jonathan Tuzman

---

你解决了吗？我也遇到了类似的问题。 - Amit Mankotia

嗨，我想问一下关于eslint的问题，所以我需要将eslint实现到我的cypress项目中，并添加eslint-plugin-cypress，对吗？ - monti

Answer 1

升级到cypress 4+后，我遇到了这个错误。我安装了eslint-plugin-cypress，并在package.json或独立的配置文件中的扩展配置中启用它：https://github.com/cypress-io/eslint-plugin-cypress。

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

- alex

---

两年前的答案，但仍然有效。谢谢！ - Kid

仍然是正确的答案！ - volume one

仍然是正确的答案，但在2022年我不得不编辑.eslintrc文件。 - Jack

依然有效。运行 npm install -D eslint-plugin-cypress 并将其添加到 .eslintrc.js 文件中。 - Alonso Pablo

Answer 2

将 .eslintrc.json 添加到 cypress 目录中

在 .eslintrc.json 文件中

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

• 我没有安装eslint-plugin-cypress，这样问题就解决了。

- Omer

---

您需要安装插件。看起来问题已经解决的原因是ESLint会报错并停止对目录进行代码检查，从而消除所有警告。由于您似乎正在使用VSCode，因此您可以单击右下角的ESLint选项卡以验证这一点。 - CudB

我仍然遇到了这个错误：模块构建失败（来自./node_modules/cypress-plugin-tab/src/index.js）：ReferenceError：Cypress未定义。 - Ashok kumar Ganesan

你能看一下这个问题吗？ - Ashok kumar Ganesan

无法工作 ERROR in [eslint] 在 '.eslintrc' 中声明的 'cypress' 插件加载失败：找不到模块 'eslint-plugin-cypress'。 - Nikolay Advolodkin

Answer 3

在eslintrc的全局变量中指定cy

这里有答案

cy是一个全局变量，类似于location。实际上它是window.cy。你可以将其添加到Eslint的全局变量中。不要从Cypress中导入cy。

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

我将其添加到我的.eslintrc文件中，并解决了这个问题。

- Adam Caron

---

非常感谢。这对我来说不需要安装插件和导入cy也可以工作。 - Wirat Leenavonganan

Answer 4

我当时遇到了很多困难，然后这个方法帮了我......
只需在两个配置文件之一 eslintrc.json 或 eslintrc.js 中添加这一行代码（如果你的 extends 中还有其他依赖项，请在此之后追加它们）。

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

- CodeWorld

---

请运行以下命令 - yarn add eslint-plugin-cypress --dev。 - Andrey Patseiko

你为什么有两个ESLint配置文件？ - Spikatrix

@Spikatrix请随意配置一个。 - CodeWorld

@CodeWorld 是的，但是你的回答提到了两个配置文件。我只是想知道为什么会这样。 - Spikatrix

@Spikatrix 其实那是我犯傻了。因为我经过很多努力才找到它并且它也能正常工作，所以我遵循了“不要碰已经正常工作的东西”的原则。（但是你提出的建议肯定更正确） - CodeWorld

这也可以在你的 package.json 配置中实现，就像这样： "eslintConfig": { "extends": [ "plugin:cypress/recommended" ] } - myyk

Answer 5

Cypress的ESLint插件将消除这些警告：

• yarn add -D eslint-plugin-cypress (https://github.com/cypress-io/eslint-plugin-cypress)
• 在项目根目录中添加.eslintrc并包含以下内容：

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

- corysimmons

Answer 6

尝试使用 import cy from "cypress"，这对我解决了问题。

- Noah Franco

---

你好，欢迎来到Stack Overflow。你可以使用以下链接来改善你的答案：https://stackoverflow.com/help/how-to-answer 和 https://stackoverflow.com/tour - Amirhossein

Answer 7

在你的文件顶部放置以下代码：

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

或者下载官方类型文件

来源：官方Cypress智能代码补全文档

- voiys

---

谢谢，但实际上这根本不起作用。我还尝试下载@types/cypress并将其添加到我的tsconfig中，但这对任何问题都没有帮助。 - Jonathan Tuzman

仍然出现此错误 模块构建失败（来自./node_modules/cypress-plugin-tab/src/index.js）： ReferenceError: Cypress未定义 - Ashok kumar Ganesan

Answer 8

我用这个有些傻的导入方式替换了旧的类型引用方式： import type {} from 'cypress'; 现在，IDE不仅认识Cypress的全局变量，而且避免了与tsconfig.json中的"isolatedModules"问题。

- Ron Newcomb

Answer 9

只需将以下代码添加到你的tsconfig.json文件中，用于e2e测试：

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

这将增加对Cypress类型的支持。

- adrisons

Answer 10

看起来我找到了一个对我有效的解决方法。将此导入添加到测试顶部：

import _Cypress from "cypress";

放松并舒适ESLint插件。实际上，可以使用任何导入名称来代替“_Cypress”：符合您审美的任何名称，不会与任何内容冲突，并以下划线开头（以免再次触发ESLint）。当然，这看起来像一种巫术。我不知道为什么它能够工作，可能有更好的方法来呈现ESLint Cypress的全局变量，但我不知道。

- Dmitriy Stepanenko

---

它可能会将cypress.d.ts引入作用域。 - SuchAnIgnorantThingToDo-UKR