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" /> 不起作用。

更新（有点）

我遵循了here 的指示并取得了一些进展。在我已经非常完整的 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 文件时，赛普拉斯的“主屏幕”会运行，但是当我点击打开我的测试时，它需要很长时间，然后显示很多错误, 以

开头

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，则表示该文件没有测试。

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

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 全局变量中指定 cy

Answered here

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

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

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

Answer 4

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

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

Answer 6

放在文件的顶部

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

或下载official types

来源：official cypress intellisense docs

Answer 7

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

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

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

Answer 8

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

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