cypress: TypeError: Cannot destructure property 'data' of 'undefined' as it is undefined. at :4649:286986

Same here. Starts failing after update to v12. Only on component testing

Since our cypress v12 update we’re experiencing the same exception. I can share some additional stuff:

• the issue itself is not reproducible, it’s flaky and sometimes works, sometimes not
• in our case it only occurs in the CI environment (I don’t experience it on windows, a colleague once got the error on linux)
• we use either npx nx affected --target=component-test or npx nx run-many --target=component-test --all to run the tests
• if it fails it will only fail for the first test in a run

@lmiller1990 We turned of parallelization due to the issue - but it didn’t help.

Hi,

We are also experiencing this issue. We’re using Angular 14.3.0 and Cypress 2.7.0 and node 16.19.1. The issue only occurs on Jenkins Linux, while we couldn’t reproduce it on a Windows machine locally. It only happens with component tests and on the first run. The problem started after upgrading from angular 13 to angular 14

This issue is causing a lot of problems for us, as a large number of our builds are failing because of it. We would really appreciate any help in resolving this issue as soon as possible.

Here are our dependencies:

 "dependencies": {
    "@angular/animations": "^14.3.0",
    "@angular/common": "^14.3.0",
    "@angular/compiler": "^14.3.0",
    "@angular/core": "^14.3.0",
    "@angular/forms": "^14.3.0",
    "@angular/localize": "^14.3.0",
    "@angular/platform-browser": "^14.3.0",
    "@angular/platform-browser-dynamic": "^14.3.0",
    "@angular/router": "^14.3.0",
    "@fortawesome/fontawesome-free": "^6.3.0",
    "@myndmanagement/text-mask": "^13.1.3",
    "@ng-bootstrap/ng-bootstrap": "^13.1.1",
    "@popperjs/core": "^2.11.6",
    "@syncfusion/ej2-angular-base": "20.3.47",
    "@syncfusion/ej2-angular-grids": "20.3.47",
    "@syncfusion/ej2-angular-inputs": "20.3.47",
    "@syncfusion/ej2-angular-navigations": "20.3.47",
    "@syncfusion/ej2-angular-popups": "20.3.47",
    "@syncfusion/ej2-data": "20.3.47",
    "@syncfusion/ej2-grids": "20.3.47",
    "bootstrap": "^5.2.1",
    "chromedriver": "^94.0.0",
    "fast-deep-equal": "^3.1.3",
    "ibantools": "^4.1.5",
    "moment": "^2.29.1",
    "ngx-mask": "^10.0.1",
    "rxjs": "^7.8.0",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.11",
    "@angular/cli": "^14.2.11",
    "@angular/compiler-cli": "^14.3.0",
    "@cypress/schematic": "^2.4.0",
    "@types/jest": "^28.1.3",
    "@types/node": "^17.0.35",
    "codelyzer": "^6.0.0",
    "cypress": "12.7.0",
    "cypress-multi-reporters": "^1.6.2",
    "jest": "^28.1.3",
    "jest-environment-jsdom": "^28.1.3",
    "jest-preset-angular": "^12.1.0",
    "json-server": "^0.16.3",
    "mocha": "^10.0.0",
    "mocha-junit-reporter": "^2.0.2",
    "mochawesome": "^7.1.0",
    "mochawesome-merge": "^4.2.1",
    "ng-swagger-gen": "^2.3.1",
    "npm-run-all": "^4.1.5",
    "sass": "^1.52.3",
    "source-map-explorer": "^2.5.3",
    "ts-node": "^10.9.1",
    "tslint": "^6.1.0",
    "typescript": "^4.8.2",
    "wait-on": "^6.0.0",
    "zip-folder": "1.0.0"
  },

@lmiller1990 I tried removing the code coverage plugin. The pipeline still fails.

I’ve spent a bit of time looking at this and have not been able to reproduce this issue which makes it very difficult to track down exactly what is going wrong. I will make some changes to the specific line of code that’s blowing up so we get a more meaningful error, but that won’t address the underlying issue (simply change how it’s reported in the logs). If anyone can supply a reproduction case that would be extremely helpful since this appears to be a combination of CI configuration, resourcing, and component testing project structure/size that is difficult to replicate without a starting point.

There are a few things that I can suggest pending a reproduction being provided:

1. This appears to be specific to Electron - using Chrome or Firefox may be a workaround depending on your use case
2. Some of the attached logs seem to indicate potential issues with IPv6 networking which can cause problems in Electron. You may want to validate the base OS image being used in CI to ensure it isn’t unnecessarily outdated
3. Please check if there are any custom plugins or event handlers that may be attempting to intercept or act on browser start/stop events. These may not have been updated to account for changes to browser launching that were made in 12.7.0

@lmiller1990 Yes, we have this problem with component, never with e2e. We are using Angular 14.3.0 and angular uses webpack 5.76. The tests continue, but the result of the first one is a fail. If we disable the first one, the problem will be the same with the next first one., so this is not linked to the test.

I think that will be hard to reproduce, because we have two projects using the same version of the dependencies, has some test in a common repository (executed on the both projects). One is crashing 50% of the time, and the second one, never crash. The big difference between the two projects, is that the problematic one is more big and take more time to compile and load.

Note also that happens only on jenkins (linux), and never in local (windows).

Following the list of our dependencies.

"dependencies": {
    "@angular/animations": "14.3.0",
    "@angular/cdk": "14.2.7",
    "@angular/common": "14.3.0",
    "@angular/core": "14.3.0",
    "@angular/forms": "14.3.0",
    "@angular/material": "14.2.7",
    "@angular/material-date-fns-adapter": "14.2.7",
    "@angular/platform-browser": "14.3.0",
    "@angular/platform-browser-dynamic": "14.3.0",
    "@angular/router": "14.3.0",
    "@deja-js/component": "~14.2.0",
    "@fontsource/material-icons": "~4.5.4",
    "@fontsource/roboto": "~4.5.8",
    "@fortawesome/fontawesome-svg-core": "~6.4.0",
    "@fortawesome/free-regular-svg-icons": "~6.4.0",
    "@fortawesome/free-solid-svg-icons": "~6.4.0",
    "core-js": "~3.29.1",
    "date-fns": "2.29.3",
    "dejajs-dpi": "~14.20.0",
    "json-object-mapper": "~1.7.1",
    "lean-he": "~2.1.2",
    "lodash-es": "~4.17.21",
    "monaco-editor": "~0.36.1",
    "ng-event-source": "~1.0.14",
    "rxjs": "~7.8.0",
    "tslib": "~2.5.0",
    "zone.js": "~0.13.0"
},
"devDependencies": {
    "@angular-builders/custom-webpack": "~14.1.0",
    "@angular-devkit/architect": "~0.1402.10",
    "@angular-devkit/build-angular": "14.2.11",
    "@angular/cli": "14.2.11",
    "@angular/compiler": "14.3.0",
    "@angular/compiler-cli": "14.3.0",
    "@angular/language-service": "14.3.0",
    "@commitlint/cli": "~17.5.1",
    "@commitlint/config-conventional": "~17.4.4",
    "@hug/eslint-config": "~10.0.1",
    "@rxweb/types": "~1.0.8",
    "@sentry/browser": "7.45.0",
    "@types/ckeditor4": "4.16.5",
    "@types/jasmine": "~4.3.1",
    "@types/jasminewd2": "2.0.10",
    "@types/lodash-es": "~4.17.7",
    "@types/node": "~18.15.11",
    "ckeditor4": "4.21.0",
    "cypress": "12.9.0",
    "cypress-fail-fast": "7.0.0",
    "eslint": "~8.37.0",
    "eslint-plugin-deprecation": "~1.3.3",
    "husky": "~8.0.3",
    "jasmine-core": "~4.5.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "sonarqube-scanner": "2.9.1",
    "ts-node": "~10.9.1",
    "typescript": "~4.8.4",
    "typescript-strict-plugin": "~2.1.0",
    "webpack-bundle-analyzer": "~4.8.0",
    "webpack-retry-chunk-load-plugin": "~3.1.1",
    "x2js": "~3.4.4"
}, 

Hello

Same problem for me on Jenkins. In attachment the DEBUG log.

https://raw.githubusercontent.com/vapkse/logs/main/debug-cypress-component-issue.log

• node --version v18.13.0
• yarn --version 1.22.19

Yeah I had the same "before each" hook for "should render" and I don’t have “before each” hook in my test But we use @cypress/code-coverage and it adds before each hook automatically. I removed this plugin from code but error still happens. It is reported without “before each” hook now

1) Dashboard
       should render:
     TypeError: Cannot destructure property 'data' of 'undefined' as it is undefined.
      at <embedded>:4649:286986