Description
openedon Jul 28, 2019
Expected Behavior
The e2e test in the tutorial should start up the page (and then fail the tests). See tutorial here: https://nx.dev/angular/tutorial/02-add-e2e-test
Current Behavior
The e2e test fails to load the page in the beforeEach(() => cy.visit('/'));
step. An exception is thrown and it looks like the Angular App component is not instantiated/loaded.
When running the e2e test with the production configuration it does work as expected. ng e2e todos-e2e --watch --prod
The build option '"optimization": true' (which is part of --prod) is what makes the difference.
Failure Information (for bugs)
The exception output is:
Uncaught SyntaxError: Invalid or unexpected token
This error originated from your application code, not from Cypress.
When Cypress detects uncaught errors originating from your application it will automatically fail the current test.
This behavior is configurable, and you can choose to turn this off by listening to the 'uncaught:exception' event.
https://on.cypress.io/uncaught-exception-from-application
Because this error occurred during a 'before each' hook we are skipping the remaining tests in the current suite: 'TodoApps'
Steps to Reproduce
- Follow tutorial step 1: https://nx.dev/angular/tutorial/01-create-application
- Follow tutorial step 2: https://nx.dev/angular/tutorial/02-add-e2e-test
- See it fail when running: ng e2e todos-e2e --watch
- See it succeed when running ng e2e todos-e2e --watch --prod
Context
- version of Nx used.
8.4.0 - version of Angular CLI used
8.1.1 angular.json
configuration
As created by the tutorial
Edit:
After looking into the problem some more it seem to come from a problem in vendor.js, probably code coming from @angular/core. There seems to be a problem with unicode characters in a function name.
The offending line is: const interpolatedValue = ��ɵinterpolation5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
The strange thing is that only in the Cypress browser window this is the case for this line. Opening another Chrome Window on the same server and looking at the same line reveals this:
const interpolatedValue = ɵɵinterpolation5(prefix, v0, i0, v1, i1, v2, i2, v3, i3, v4, suffix);
And also loads the page without problem.
To make matters even more confusing, I've tried a non Nx Angular project with Cypress of the same versions and then there is no problem.
Edit2:
Uninstalling Cypress 3.4.0 and installing Cypress 3.2.0 fixed the problem. Higher than that and it will not visit the page unless you use --prod. So it looks like a Cypress problem but it breaks the tutorial.