ESLint：未定义“ cy”（赛普拉斯） [英] ESLint: 'cy' is not defined (Cypress)

问题描述

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

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

它可以在赛普拉斯中正常运行。但是我在Webstorm中遇到Typescript错误，说未定义 cy （TS和ESlint错误），而 describe 说提供--isolatedModules标志时，所有文件都必须是模块。

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.

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

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

我尝试了从'cypress'导入cy ，但是随后我得到 ParseError：'import'和'export'可能仅在'sourceType：module'是蠕虫的另一种罐头（我正在编写一些测试，但还没有导入任何东西……）

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

///<引用类型= cypress /> 不起作用。

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

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

如文章中所述设置 plugins / index 文件时，赛普拉斯主屏幕运行，但是当我单击以打开测试时，它会花费很长时间，然后显示很多错误，从

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]

实际上，后面跟着很多Typescript输出，例如：

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

请注意，这些现在是测试文件外部代码的错误（尽管也许是有道理的）。其中许多文件用于我使用Jest而不是Cypress的文件，并且您看到的许多错误似乎与推断 Assertion 类型有关期望不是Jest，因此它认为 toEqual 匹配器是错误的。

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.

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

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.

所有这些都带有ts测试文件。如果我将文件重命名为js，则表示文件没有测试。

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!

推荐答案

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

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

这篇关于ESLint：未定义“ cy”（赛普拉斯）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！