没有定义“ cy”(Cypress)

我刚刚开始使用 Cypress 和我的 React 类型脚本项目，我已经得到了一些简单的测试运行:

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 遇到了打字错误，说 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]

实际上，接下来是大量的类型脚本输出，如下所示:

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 断言下划线。

这些都是测试文件。如果我将文件重命名为 js，它表示该文件没有测试。

有什么帮助吗? 我爱柏树，但我有一个地狱的时间让它完全工作！

55632

小开

at the top of your file put

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

or download the official types

source: official cypress intellisense docs

小开

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

小开

Just add these lines to your tsconfig.json file for e2e tests:

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

This adds support for cypress types.

小开

Try.. import cy from "cypress" this solved the problem for me.

小开

Add .eslintrc.json to cypress directory

In .eslintrc.json

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

I do not install eslint-plugin-cypress, and it fix the problem

小开

Specify `cy` in eslintrc globals

Answered here

cy is a global variable. Much like location. So really it is window.cy. You can add it to the globals in Eslint. Don't import cy from cypress.

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

Added that to my .eslintrc and fixed the issue

小开

The Cypress ESLint plugin will get rid of these warnings:

yarn add -D eslint-plugin-cypress (https://github.com/cypress-io/eslint-plugin-cypress)
add .eslintrc to the root of your project with the following:

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

小开

I struggled a lot then this helped...
by adding same line in two files, eslintrc.json and eslintrc.js
(if u have other dependencies in extends, append them as well after it)

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

小开

/* global cy */

import above in your test file

example: suppose you have login test ("cypress test file ex: cypress/integration/login.js")

小开

add this to jest.config.js

  testPathIgnorePatterns: [
'/cypress',
],

小开

I replaced the old style of type referencing,

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

with this silly import

import type {} from 'cypress';

And the IDE now both recognizes Cypress's globals while also avoiding the "isolatedModules" issue it has with tsconfig.json

小开

I refer to this answer but It was still not working, I added a space after the closing tag of reference and it all started working perfectly fine, weird behavior from cypress though.

小开

Seems I found a remedy that works (at least) for me. Adding this import to the top of the test:

import _Cypress from "cypress";

relaxes and comforts the ESLint plugin. Actually any name for the import can be used instead of "_Cypress": any that conforms your sense of beauty, does not conflict with anything and starts with underscore (to not provoke ESLint again). Of course, it looks like a kind of voodoo. I don't know why it works and probably there are better ways to present ESLint Cypress's globals, but I don't know them.

小开

Wrap your config object with defineConfig in the cypress.confi.ts file like so

import { defineConfig } from "cypress";


export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
return config;
},
},


component: {
devServer: {
framework: "create-react-app",
bundler: "webpack",
},
},
});

没有定义“ cy”(Cypress)

更新(某种程度上)

Add .eslintrc.json to cypress directory

Specify cy in eslintrc globals

Specify `cy` in eslintrc globals