Cypress 终端错误：属性在类型 ‘cy & CyEventEmitter’ 上不存在。

huangapple
go评论107阅读模式
英文:

Cypress terminal error: Property does not exist on type 'cy & CyEventEmitter

问题

以下是您提供的内容的中文翻译：

技术堆栈： Angular v15 和 Cypress V12

我的组件和端到端测试似乎运行正常，但在运行测试时出现了奇怪的终端错误。

这可能与我为共享命令配置的 Cypress 配置有关。

这是我的共享命令：

  1. declare global {
  2.   namespace Cypress {
  3.     interface Chainable {
  4.       loginAs(role?: string): Chainable<any>,
  5.       isWelcomePage(): Chainable<any>,
  6.       openMenu(): Chainable<any>,
  7.     }
  8.   }
  9. }
  11. Cypress.Commands.add('loginAs', (role?: string) => {
  12.   const user = Cypress.env('user');
  13.   cy.visit(Cypress.env('local'));
  14.   cy.get('#mat-input-0', { timeout: 30000 }).should('be.visible').type(user.email);
  15.   cy.get('#mat-input-1', { timeout: 30000 }).should('be.visible').type(user.password);
  16.   cy.get('.btn').click({ force: true });
  17. });

这是我的 Cypress 配置：

  1. import { defineConfig } from "cypress";
  2. const { verifyDownloadTasks } = require('cy-verify-downloads');
  4. export default defineConfig({
  5.   e2e: {
  6.     setupNodeEvents(on, config) {
  7.       on('task', verifyDownloadTasks)
  8.     },
  9.     specPattern: "cypress/e2e/**/*.cy.ts",
  10.   },
  11.   chromeWebSecurity: false,
  12.   screenshotsFolder: "cypress/snapshots",
  13.   trashAssetsBeforeRuns: true,
  14.   viewportWidth: 1400,
  15.   viewportHeight: 1200,
  16.   video: false,
  17.   defaultCommandTimeout: 10000,
  18.   env: {
  19.     local: "http://localhost:4200/",
  20.     staging: "hidden",
  21.     backend: "hidden",
  22.     user: {
  23.       email: "hidden",
  24.       password: "hidden",
  25.     },
  26.   },
  27.   component: {
  28.     devServer: {
  29.       framework: "angular",
  30.       bundler: "webpack",
  31.     },
  32.     specPattern: "**/*.cy.ts",
  33.   },
  34. });

这是终端错误：

Cypress 终端错误：属性在类型 ‘cy & CyEventEmitter’ 上不存在。

确切的错误消息

  • 类型 'cy & CyEventEmitter' 上不存在属性 'loginAs'。

当前尝试：

Tsconfig：

  1. {
  2.   "compileOnSave": false,
  3.   "compilerOptions": {
  4.     "baseUrl": "./",
  5.     "outDir": "./dist/out-tsc",
  6.     "forceConsistentCasingInFileNames": true,
  7.     "strict": false,
  8.     "noImplicitOverride": true,
  9.     "noPropertyAccessFromIndexSignature": false,
  10.     "noImplicitReturns": true,
  11.     "noFallthroughCasesInSwitch": true,
  12.     "sourceMap": true,
  13.     "declaration": false,
  14.     "downlevelIteration": true,
  15.     "experimentalDecorators": true,
  16.     "moduleResolution": "node",
  17.     "importHelpers": true,
  18.     "target": "ES2022",
  19.     "module": "es2020",
  20.     "allowJs": true,
  21.     "lib": [
  22.       "es2020",
  23.       "dom"
  24.     ],
  25.     "esModuleInterop": true,
  26.     "allowSyntheticDefaultImports": true,
  27.     "types": ["cypress", "cy-verify-downloads"],
  28.   },
  29.   "angularCompilerOptions": {
  30.     "enableI18nLegacyMessageIdFormat": false,
  31.     "strictInjectionParameters": false,
  32.     "strictInputAccessModifiers": false,
  33.     "strictTemplates": false
  34.   },
  35.   "include": [
  36.     "./src",
  37.     "./cypress/support/index.d.ts"
  38.   ]
  39. }

index.d.ts 文件：

  1. /// <reference types="cypress" />
  2. export { }
  4. declare global {
  5.   namespace Cypress {
  6.     interface Chainable {
  7.       loginAs(role?: string): Chainable<any>,
  8.       isWelcomePage(): Chainable<any>,
  9.       openMenu(): Chainable<any>,
  10.     }
  11.   }
  12. }

当我运行组件测试时，我得到了相同的终端错误。

Cypress 终端错误：属性在类型 ‘cy & CyEventEmitter’ 上不存在。

英文:

Tech stack: Angular v15 and Cypress V12

My component and e2e tests seem to run fine but I get these weird terminal errors when running the tests.

It could be an issue with my Cypress configuration for my shared commands.

This is my shared commands:

  1. declare global {
  2.   namespace Cypress {
  3.     interface Chainable {
  4.       loginAs(role?: string): Chainable&lt;any&gt;,
  5.       isWelcomePage(): Chainable&lt;any&gt;,
  6.       openMenu(): Chainable&lt;any&gt;,
  7.     }
  8.   }
  9. }
  11. Cypress.Commands.add(&#39;loginAs&#39;, (role?: string) =&gt; {
  12.   const user = Cypress.env(&#39;user&#39;);
  13.   cy.visit(Cypress.env(&#39;local&#39;));
  14.   cy.get(&#39;#mat-input-0&#39;, { timeout: 30000 }).should(&#39;be.visible&#39;).type(user.email);
  15.   cy.get(&#39;#mat-input-1&#39;, { timeout: 30000 }).should(&#39;be.visible&#39;).type(user.password);
  16.   cy.get(&#39;.btn&#39;).click({ force: true });
  17. });

This is my cypress configuration:

  1. import { defineConfig } from &quot;cypress&quot;;
  2. const { verifyDownloadTasks } = require(&#39;cy-verify-downloads&#39;);
  4. export default defineConfig({
  5.   e2e: {
  6.     setupNodeEvents(on, config) {
  7.       on(&#39;task&#39;, verifyDownloadTasks)
  8.     },
  9.     specPattern: &quot;cypress/e2e/**/*.cy.ts&quot;,
  10.   },
  11.   chromeWebSecurity: false,
  12.   screenshotsFolder: &quot;cypress/snapshots&quot;,
  13.   trashAssetsBeforeRuns: true,
  14.   viewportWidth: 1400,
  15.   viewportHeight: 1200,
  16.   video: false,
  17.   defaultCommandTimeout: 10000,
  18.   env: {
  19.     local: &quot;http://localhost:4200/&quot;,
  20.     staging: &quot;hidden&quot;,
  21.     backend: &quot;hidden&quot;,
  22.     user: {
  23.       email: &quot;hidden&quot;,
  24.       password: &quot;hidden&quot;,
  25.     },
  26.   },
  27.   component: {
  28.     devServer: {
  29.       framework: &quot;angular&quot;,
  30.       bundler: &quot;webpack&quot;,
  31.     },
  32.     specPattern: &quot;**/*.cy.ts&quot;,
  33.   },
  34. });

This is the terminal errors:

Cypress 终端错误：属性在类型 ‘cy & CyEventEmitter’ 上不存在。

Exact error messages

  • Property 'loginAs' does not exist on type 'cy & CyEventEmitter'.

Current Attempt:

Tsconfig:

  1. {
  2.   &quot;compileOnSave&quot;: false,
  3.   &quot;compilerOptions&quot;: {
  4.     &quot;baseUrl&quot;: &quot;./&quot;,
  5.     &quot;outDir&quot;: &quot;./dist/out-tsc&quot;,
  6.     &quot;forceConsistentCasingInFileNames&quot;: true,
  7.     &quot;strict&quot;: false,
  8.     &quot;noImplicitOverride&quot;: true,
  9.     &quot;noPropertyAccessFromIndexSignature&quot;: false,
  10.     &quot;noImplicitReturns&quot;: true,
  11.     &quot;noFallthroughCasesInSwitch&quot;: true,
  12.     &quot;sourceMap&quot;: true,
  13.     &quot;declaration&quot;: false,
  14.     &quot;downlevelIteration&quot;: true,
  15.     &quot;experimentalDecorators&quot;: true,
  16.     &quot;moduleResolution&quot;: &quot;node&quot;,
  17.     &quot;importHelpers&quot;: true,
  18.     &quot;target&quot;: &quot;ES2022&quot;,
  19.     &quot;module&quot;: &quot;es2020&quot;,
  20.     &quot;allowJs&quot;: true,
  21.     &quot;lib&quot;: [
  22.       &quot;es2020&quot;,
  23.       &quot;dom&quot;
  24.     ],
  25.     &quot;esModuleInterop&quot;: true,
  26.     &quot;allowSyntheticDefaultImports&quot;: true,
  27.     &quot;types&quot;: [&quot;cypress&quot;, &quot;cy-verify-downloads&quot;],
  28.   },
  29.   &quot;angularCompilerOptions&quot;: {
  30.     &quot;enableI18nLegacyMessageIdFormat&quot;: false,
  31.     &quot;strictInjectionParameters&quot;: false,
  32.     &quot;strictInputAccessModifiers&quot;: false,
  33.     &quot;strictTemplates&quot;: false
  34.   },
  35.   &quot;include&quot;: [
  36.     &quot;./src&quot;,
  37.     &quot;./cypress/support/index.d.ts&quot;
  38.   ]
  39. }

index.d.ts file:

  1. /// &lt;reference types=&quot;cypress&quot; /&gt;
  2. export { }
  4. declare global {
  5.   namespace Cypress {
  6.     interface Chainable {
  7.       loginAs(role?: string): Chainable&lt;any&gt;,
  8.       isWelcomePage(): Chainable&lt;any&gt;,
  9.       openMenu(): Chainable&lt;any&gt;,
  10.     }
  11.   }
  12. }

I got the same terminal errors when I run the component tests.

Cypress 终端错误：属性在类型 ‘cy & CyEventEmitter’ 上不存在。

答案1

得分: 3

以下是翻译好的部分：

  • 将自定义命令类型放在 cypress/support/index.d.ts 中

  • 添加对基本 Cypress 类型的引用

  • 将 .d.ts 文件声明为一个带有虚拟导出的模块

  1. /// <reference types="cypress" />
  2. export {}
  4. declare global {
  5.   namespace Cypress {
  6.     interface Chainable {
  7.       loginAs(role?: string): Chainable<any>,
  8.       isWelcomePage(): Chainable<any>,
  9.       openMenu(): Chainable<any>,
  10.     }
  11.   }
  12. }

在 tsconfig.json 中添加您的 index.d.ts

  1. {
  2.   ...
  3.   "include": [ "./src/app", "./cypress/support/index.d.ts"],
  4. }
英文:

There's probably a few ways to tackle it, here's one

  • put the custom command types in cypress/support/index.d.ts

  • add a reference to base cypress types

  • make the .d.ts a module with a dummy export

  1. /// &lt;reference types=&quot;cypress&quot; /&gt;
  2. export {}
  4. declare global {
  5.   namespace Cypress {
  6.     interface Chainable {
  7.       loginAs(role?: string): Chainable&lt;any&gt;,
  8.       isWelcomePage(): Chainable&lt;any&gt;,
  9.       openMenu(): Chainable&lt;any&gt;,
  10.     }
  11.   }
  12. }

In tsconfig.json add your index.d.ts

  1. {
  2.   ...
  3.   &quot;include&quot;: [ &quot;./src/app&quot;, &quot;./cypress/support/index.d.ts&quot;],
  4. }

huangapple
  • 本文由 发表于 2023年6月12日 20:01:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76456463.html
  • angular
  • cypress
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定