programing

ESLint: 'cy'가 정의되어 있지 않습니다(Cypress).

showcode 2023. 3. 26. 11:59
반응형

ESLint: 'cy'가 정의되어 있지 않습니다(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?
  });
});

이치노 웹스톰에서하는데, 타이프스크립트 오류가 요.cy있지 않다( 및 오류(TS ESlint 오류)describeall files must be modules when the --isolatedModules flag is provided.

수 , 파일이 .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 바와 같이홈 몇 그후 많은는 '홈 '부터 됩니다.

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

테스트 파일 외부에 있는 코드에 대한 오류입니다(단, 이것이 타당할 수도 있음).는 제스트와 것 .Assertionexpect가 '제스트'가 '제스트'다.toEqual마체르

지금까지도 가 나의 ESLint에 .cyTypeScript 그력Jest 주주는는는는는는는는는는는는는는는는는는는는는는 。

이것은 모두 ts 테스트 파일입니다.파일 이름을 js로 바꾸면 파일에 테스트가 없다고 표시됩니다.

도움이 필요하신가요?사이프러스도 좋지만 제대로 작동시키느라 고생하고 있어요!

편백 버전 4+로 업그레이드 한 후 오류가 발생하였습니다.설치 the the the를 했습니다.eslint-plugin-cypress https://github.com/cypress-io/eslint-plugin-cypress 및 패키지 중 하나의 확장 Configuration에서 활성화되었습니다.json 또는 별도의 구성 파일:

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

.eslintrc.json을 sypress 디렉토리에 추가합니다.

».eslintrc.json

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

여기에 이미지 설명 입력

  • 하지 .eslint-plugin-cypress

cy globalslintrc에서

답변은 이쪽

cy는 글로벌 변수입니다.장소랑 비슷해요.정말 window.cy 입니다.에슬린트의 글로벌에 추가할 수 있습니다.편백나무에서 편백나무는 수입하지 마세요.

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

그것을 나의 것에 추가했다..eslintrc문제를 해결했습니다.

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

해봐...import cy from "cypress"이게 제 문제를 해결했어요.

파일 입력의 맨 위에

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

또는 공식 유형을 다운로드하십시오.

출처: 공식 사이프러스 인텔리센스 문서

많이 힘들었는데 이게 도움이 돼서...
같은 행을 2개파일에 추가함으로써eslintrc.json그리고.eslintrc.js
(확장에 다른 의존관계가 있는 경우 그 뒤에 추가합니다.)

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

이 행들을 추가하기만 하면 됩니다.tsconfig.jsone2e 테스트 파일:

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

편백나무 유형에 대한 지원을 추가합니다.

/* global cy */

테스트 파일에 위의 Import

예: 로그인 테스트("cypress test file ex: sypress/integration/sylist.param")가 있다고 가정합니다.

예전 타입의 참조를 대체했습니다.

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

이 바보 같은 수입품으로

import type {} from 'cypress';

IDE는 현재 둘 다 Cypress의 글로벌을 인식함과 동시에 tsconfig.json과 관련된 "solated Modules" 문제를 회피하고 있습니다.

나한테 효과가 있는 치료법을 찾은 것 같아.이 Import를 테스트 상단에 추가합니다.

import _Cypress from "cypress";

는 ESLint 플러그인의 긴장을 풀어 줍니다.실제로 Import의 이름은 '_Cypress' 대신 사용할 수 있습니다. 즉, 자신의 미의식에 부합하고, 무엇과도 충돌하지 않으며, 밑줄로 시작하는 이름(ESLint를 다시 자극하지 않기 위해).물론, 그것은 일종의 부두교처럼 보입니다.나는 그것이 왜 효과가 있는지 그리고 아마도 ESLint Cypress의 글로벌을 보여줄 더 좋은 방법들이 있을 것이다. 하지만 나는 그것들을 모른다.

이것을 jeast.config.display에 추가합니다.

  testPathIgnorePatterns: [
    '/cypress',
  ],

포장config에 이의를 제기하다.defineConfig에서cypress.confi.ts이렇게 줄서다

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",
    },
  },
});

나는 더하기.eslintignore루트 디렉토리에 배치*.cy.js모든 테스트 파일은 회피책일 뿐입니다.

나머지 사람들에게는 실제 솔루션이 실제로 솔루션이 도입되고 있는 것 같습니다.eslint-plugin-cypress추가:

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

하지만 이 플러그인은 더 이상 지원되지 않기 때문에(거의 1년 동안) 제 경우 idt는 도움이 되지 않았습니다.그래서 이 플러그인과 결합하면 중대한 오류가 발생하게 됩니다.cypress-axe.

언급URL : https://stackoverflow.com/questions/58982852/eslint-cy-is-not-defined-cypress

반응형