search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.87k stars 3.17k forks source link

Angular Component Testing broken by cypress 10.8.0 #23940

Open tja4472 opened 2 years ago

tja4472 commented 2 years ago

Current behavior

Chrome v105 Ubuntu 22.04.1 LTS

ERROR in src/app/app.module.ts:30:16 - error TS2339: Property 'Cypress' does not exist on type 'Window & typeof globalThis'.

30 if (window.Cypress) {

Executing task: npm run cypress:open:component

ng-jest-cypress-template@0.0.0 cypress:open:component cypress open --component


GET /__/ 200 87.547 ms - -
GET /__/assets/index.42ea0b38.css 200 19.152 ms - -
GET /__/assets/polyfills.dabe60b8.js 200 19.164 ms - -
POST /ListAccounts?gpsia=1&source=ChromiumBrowser&json=standard 200 761.864 ms - -
GET /chrome-variations/seed?osname=linux&channel=stable&milestone=105 304 772.078 ms - -
GET /__/assets/index.48ac5e8f.js 200 37.345 ms - -
GET /__/assets/Specs.3d3753c5.js 200 47.665 ms - 485
GET /__/assets/Index.4a5d64fb.css 200 46.743 ms - -
GET /__/assets/ResultCounts.9fa154f2.js 200 48.122 ms - -
GET /__cypress/runner/cypress_runner.css 200 49.899 ms - -
GET /__/assets/Index.980765cd.js 200 49.058 ms - -
GET /__/assets/CreateSpecModal.315eb5ce.css 200 27.752 ms - 368
GET /__/assets/CreateSpecModal.7e14d3c4.js 200 27.032 ms - -
GET /__/assets/SpecPatterns.fcb105c9.js 200 44.862 ms - -
GET /__/assets/settings_x16.3d00a110.js 200 33.149 ms - -
GET /__/assets/user-outline_x16.81ee822b.js 200 44.093 ms - -
GET /__/assets/cypress_s.29af549a.png 200 51.743 ms - 4425
GET /__/assets/electron.fb07f5cc.svg 200 14.548 ms - -
GET /__/assets/chrome.1b5cb774.svg 200 23.052 ms - -
GET /__cypress/runner/cypress_runner.js 200 33.463 ms - -
asset default-node_modules_cypress_angular_dist_index_js.js 3.59 MiB {default-node_modules_cypress_angular_dist_index_js} [cached] (name: home-tim-Documents-vscode-git-hub-tim-ng-jest-cypress-template-cypress-support-component-ts) (id hint: default) 1 related asset
asset polyfills.js 318 KiB {polyfills} [cached] (name: polyfills) 1 related asset
asset cypress-entry.js 213 KiB {cypress-entry} [cached] (name: cypress-entry) 1 related asset
asset styles.js 209 KiB {styles} [cached] (name: styles) 1 related asset
asset runtime.js 12.6 KiB {runtime} [cached] (name: runtime) 1 related asset
asset spec-0.js 8.33 KiB {spec-0} [cached] (name: spec-0) 1 related asset
asset cypress_support_component_ts.js 1.8 KiB {cypress_support_component_ts} [cached] (name: home-tim-Documents-vscode-git-hub-tim-ng-jest-cypress-template-cypress-support-component-ts) 1 related asset
asset styles.css 1.18 KiB {styles} [cached] (name: styles) 1 related asset
asset favicon.ico 948 bytes [cached] [from: src/favicon.ico] [copied]
asset index.html 605 bytes [cached]
Entrypoint polyfills = runtime.js polyfills.js 2 auxiliary assets
Entrypoint styles = runtime.js styles.css styles.js 3 auxiliary assets
Entrypoint cypress-entry = runtime.js cypress-entry.js 2 auxiliary assets
chunk {cypress-entry} (runtime: runtime) cypress-entry.js (cypress-entry) 196 KiB [initial] [rendered]
chunk {cypress_support_component_ts} (runtime: runtime) cypress_support_component_ts.js (home-tim-Documents-vscode-git-hub-tim-ng-jest-cypress-template-cypress-support-component-ts) 893 bytes [rendered]
chunk {default-node_modules_cypress_angular_dist_index_js} (runtime: runtime) default-node_modules_cypress_angular_dist_index_js.js (home-tim-Documents-vscode-git-hub-tim-ng-jest-cypress-template-cypress-support-component-ts) (id hint: default) 3.46 MiB [rendered] split chunk (cache group: default)
chunk {polyfills} (runtime: runtime) polyfills.js (polyfills) 303 KiB [initial] [rendered]
chunk {runtime} (runtime: runtime) runtime.js (runtime) 7.59 KiB [entry] [rendered]
chunk {spec-0} (runtime: runtime) spec-0.js (spec-0) 6.04 KiB [rendered]
chunk {styles} (runtime: runtime) styles.css, styles.js (styles) 195 KiB (javascript) 79 bytes (css/mini-extract) [initial] [rendered]

ERROR in src/app/app.module.ts:30:16 - error TS2339: Property 'Cypress' does not exist on type 'Window & typeof globalThis'.

30 if (window.Cypress) {


ERROR in src/app/app.module.ts:32:14 - error TS2339: Property 'appRef' does not exist on type 'Window & typeof globalThis'.

32       window.appRef = appRef;

ERROR in src/app/services/app-actions-test.service.ts:11:16 - error TS2339: Property 'Cypress' does not exist on type 'Window & typeof globalThis'.

11 if (window.Cypress) {


ERROR in src/app/services/app-actions-test.service.ts:12:14 - error TS2339: Property 'AppActionsTestService' does not exist on type 'Window & typeof globalThis'.

12       window.AppActionsTestService = this;

2022-09-22 15:05:00: webpack compiled in 23098 ms (8da981c4306063db) GET /v1/pages/ChVDaHJvbWUvMTA1LjAuNTE5NS4xMjUSEAmZ_btOmwfnBhIFDRNQn9Q=?alt=proto 503 10761.766 ms - - POST /v1:GetModels?key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw 200 636.993 ms - - GET /v1/pages/ChVDaHJvbWUvMTA1LjAuNTE5NS4xMjUSEAmZ_btOmwfnBhIFDRNQn9Q=?alt=proto 200 544.080 ms - - GET /v4/threatListUpdates:fetch?$req=Ch4KDGdvb2dsZWNocm9tZRIOMTA1LjAuNTE5NS4xMjUaKQgHEAIaGwoNCAcQBhgBIgMwMDEwARCJ7QsaAhgHNGIDqSIEIAEgAigBGikIBRACGhsKDQgFEAYYASIDMDAxMAEQqs4OGgIYBzF2SbQiBCABIAIoARopCAEQAhobCg0IARAGGAEiAzAwMTABEOyOCxoCGAfJoVXfIgQgASACKAEaJwgKEAgaGQoNCAoQCBgBIgMwMDEwARAHGgIYB7rRKt8iBCABIAIoARooCAEQCBoaCg0IARAIGAEiAzAwMTAEEPYsGgIYB1_HIEQiBCABIAIoBBooCA8QAhoaCg0IDxAGGAEiAzAwMTABEPtyGgIYBzIcXLYiBCABIAIoARooCAgQAhoaCg0ICBAGGAEiAzAwMTABEOYQGgIYB0dDM0YiBCABIAIoARopCA0QAhobCg0IDRAGGAEiAzAwMTABEIDLARoCGAeC_luFIgQgASACKAEaJwgJEAIaGQoNCAkQBhgBIgMwMDEwARAgGgIYB372quUiBCABIAIoARopCAMQAhobCg0IAxAGGAEiAzAwMTABEI79ChoCGAdSSS7_IgQgASACKAEaKQgOEAIaGwoNCA4QBhgBIgMwMDEwARCd0gYaAhgHLhlAFCIEIAEgAigBGicIARACGhkKDQgBEAYYASIDMDAxMAMQFBoCGAdqu6BYIgQgASACKAMaKAgQEAIaGgoNCBAQBhgBIgMwMDEwARCwFBoCGAfFPmX2IgQgASACKAEiAggB&$ct=application/x-protobuf&key=AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw 200 653.414 ms - -

### Desired behavior

```bash
npm run cypress:open:component

should work as with 10.7.0

Test code to reproduce

https://github.com/tja4472/ng-jest-cypress-template/tree/cypress-10-8-0

Cypress Version

10.8.0

Node version

v16.15.0

Operating System

Ubuntu 22.04.1 LTS

Debug Logs

No response

Other

No response

ZachJW34 commented 2 years ago

I can confirm the regression from 10.7 to 10.8. We made a change to extend the provided tsconfig rather than the root which is why you are encountering issues. I would say the behavior is more correct after this change but there are still some issues to work out when it comes to how we are handling types/tsconfig, see my comment on a similar issue.

A workaround in the meantime would be to either add "src/index.d.ts" to your tsconfig.app.json -> files array or add a /// <reference types="../../src/index.d.ts" /> at the top of your component support file. Let me know how that works and we'll work on getting a handle on the types soon!

tja4472 commented 2 years ago

Adding "src/index.d.ts" to the tsconfig.app.json -> files array, worked. Thank you

Unfortunately in another project I use "exclude" which as you are ignoring"include` doesn't apply. https://www.typescriptlang.org/tsconfig#exclude

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  // ===
  // https://github.com/cypress-io/cypress/issues/23940#issuecomment-1256390374
  // "src/index.d.ts" --> "files"
  // ===
  "files": ["src/main.ts", "src/polyfills.ts", "src/index.d.ts"],
  "exclude": [
    "src/**/*.spec.ts",
    "src/environments/**/*",
    "src/app/+test-examples/**/*",
    "src/app/firebase/firebase-config-dev.ts",
    "src/app/firebase/firebase-config-emulator-demo.ts",
    "src/app/firebase/firebase-config-prod.ts"
  ]
}

See https://github.com/tja4472/ngrx-task/blob/cypress-10-8-0/tsconfig.app.json