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

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 错误）和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" /> 不起作用。

更新（有点）

我已按照此处的说明进行操作并取得了一些进展。在我已经非常完整的 React webpack.config.dev.js 中，我添加了推荐的代码：

          { // TODO inserted for cypress https://stackoverflow.com/a/56693706/6826164
            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 的文件，正如您所看到的，许多错误似乎与它推断出不是 Jest的Assertion类型有关expect，因此它认为toEqual匹配器是错误的。

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

这一切都与 ts 测试文件有关。如果我将文件重命名为 js，它会说该文件没有测试。

有什么帮助吗？我喜欢 Cypress，但我很难让它完全正常工作！

Answer 1

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

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

Answer 2

将 .eslintrc.json 添加到 cypress 目录

在 .eslintrc.json

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

• 我不安装eslint-plugin-cypress，它解决了问题

Answer 3

我挣扎了很多，然后这有帮助...通过在两个配置文件之一
中 添加这一行，或者 （如果你在扩展中有其他依赖项，请将它们附加在它后面）eslintrc.jsoneslintrc.js

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

Answer 4

在你的文件的顶部放

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

或下载official types

来源：官方 cypress intellisense 文档

Answer 5

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

Answer 6

cy在 eslintrc 全局变量中指定

在这里回答

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

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

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

Answer 7

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

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

这增加了对 cypress 类型的支持。

Answer 8

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"
    }
}

Answer 9

我替换了旧的类型引用样式，

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

有了这个愚蠢的进口

import type {} from 'cypress';

现在，IDE 既可以识别 Cypress 的全局变量，又可以避免 tsconfig.json 中出现的“isolatedModules”问题