ESLint:'cy' 未定义(赛普拉斯)

IT技术 reactjs eslint cypress
2021-05-16 08:27:10

我刚刚开始在我的 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 错误)和describeall 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 的文件,正如您所看到的,许多错误似乎与它推断出不是 JestAssertion类型有关expect,因此它认为toEqual匹配器是错误的。

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

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

有什么帮助吗?我喜欢 Cypress,但我很难让它完全正常工作!

4个回答

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

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

将 .eslintrc.json 添加到 cypress 目录

.eslintrc.json

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

在此处输入图片说明

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

cy在 eslintrc 全局变量中指定

在这里回答

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

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

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

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