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

时间：2019-11-21 19:59:27

标签： reactjs eslint cypress

我刚开始在我的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?
  });
});

它可以在赛普拉斯中正常运行。但是我在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的文件，并且您看到的许多错误似乎与它推断出Assertion上不是Jest的expect类型有关，以至于它认为toEqual匹配器是错误的。

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

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

有帮助吗？我爱赛普拉斯（Cypress），但要让它充分发挥作用真是令人难过！

7 个答案:

答案 0 :(得分：18)

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

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

答案 1 :(得分：7)

将.eslintrc.json添加到cypress目录

在.eslintrc.json 

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

enter image description here

  • 我没有安装eslint-plugin-cypress，它可以解决问题

答案 2 :(得分：4)

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

答案 3 :(得分：2)

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

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

答案 4 :(得分：1)

放在文件顶部

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

或下载official types

来源：official cypress intellisense docs

答案 5 :(得分：0)

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

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

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

答案 6 :(得分：0)

在eslintrc全局变量中指定cy

Answered here

cy是全局变量。很像位置。所以确实是window.cy。您可以将其添加到Eslint中的全局变量。不要从赛普拉斯导入cy。

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

将其添加到我的.eslintrc并解决了问题

相关问题
最新问题