ESLint：未定义“cy”（赛普拉斯）

Posted 2023-02-15

【中文标题】ESLint：未定义“cy”（赛普拉斯）

【英文标题】：ESLint: 'cy' is not defined (Cypress)

【发布时间】：2020-03-17 20:29:13

【问题描述】：

我刚刚开始在我的 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 错误），describe 上的错误说 all files must be modules when the --isolatedModules flag is provided。

我可以把它变成一个 JS 文件而不是一个 TS 文件，然后我仍然得到 cy 没有定义。

我已经尝试过import cy from 'cypress'，但后来我得到了ParseError: 'import' and 'export' may appear only with 'sourceType: module'，这是一个完全不同的蠕虫罐头（我正在逐步编写测试，还没有导入任何东西......）

/// <reference types="cypress" /> 不起作用。

更新（有点）

我遵循了here 的指示并取得了一些进展。在我已经非常完整的 React webpack.config.dev.js 中，我添加了推荐的代码：

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

到规则列表的末尾（就在文件加载器之前）。

当我这样做并按照文章中的说明设置plugins/index 文件时，赛普拉斯的“主屏幕”会运行，但是当我点击打开我的测试时，它需要很长时间，然后显示很多错误, 以

开头

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 的文件，正如您所看到的，许多错误似乎与它推断 expect 上的 Assertion 类型不是 Jest 相关，因此它认为toEqual 匹配器是错误的。

一直以来，在 Webstorm 中，ESLint 仍在抱怨我所有的 cy，而 TypeScript 强调了输出中提到的所有 Jest 断言。

这都是一个 ts 测试文件。如果我将文件重命名为 js，则表示该文件没有测试。

有什么帮助吗？我喜欢赛普拉斯，但我正在努力让它充分发挥作用！

【问题讨论】：

你解决了吗？我面临着类似的问题。

【参考方案1】：

升级到 cypress 版本 4+ 后出现该错误。我安装了eslint-plugin-cypress https://github.com/cypress-io/eslint-plugin-cypress 并在 package.json 或单独的配置文件中的扩展配置中激活它：

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

【参考方案2】：

将 .eslintrc.json 添加到 cypress 目录

在.eslintrc.json

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

我没有安装eslint-plugin-cypress，它解决了问题

【讨论】：

您需要安装插件。看起来问题已解决的原因是因为 ESLint 会出错并停止对目录进行 linting，因此所有警告都会消失。看起来您正在使用 VSCode，因此您可以单击右下角的 ESLint 选项卡进行验证。

我仍然收到此错误 Module build failed (from ./node_modules/cypress-plugin-tab/src/index.js): ReferenceError: Cypress is not defined

你能看看这个question

【参考方案3】：

在 eslintrc 全局变量中指定 cy

Answered here

cy 是一个全局变量。很像位置。所以真的是window.cy。您可以将其添加到 Eslint 中的全局变量中。不要从 cypress 导入 cy。

  "globals": 
    "cy": true
  

将其添加到我的.eslintrc 并修复了问题

【讨论】：

非常感谢。无需插件安装和导入 cy 即可为我工作。

【参考方案4】：

试试.. import cy from "cypress" 这解决了我的问题。

【讨论】：

嗨，欢迎来到 stack-overflow 。您可以使用此链接改进您的答案***.com/help/how-to-answer 和***.com/tour

【参考方案5】：

赛普拉斯 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"
    

【参考方案6】：

放在文件的顶部

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

或下载official types

来源：official cypress intellisense docs

【讨论】：

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

我仍然收到此错误 Module build failed (from ./node_modules/cypress-plugin-tab/src/index.js): ReferenceError: Cypress is not defined

【参考方案7】：

只需将这些行添加到您的 tsconfig.json 文件中即可进行 e2e 测试：

"compilerOptions": 
    "types": ["cypress"]

这增加了对柏树类型的支持。

【参考方案8】：

我挣扎了很多然后这有帮助... 通过在两个文件，eslintrc.json和eslintrc.js中添加相同的行 （如果你在扩展中有其他依赖项，只需附加它）

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