Skip to content

Tutorial e2e test in Step 2 only working with --prod flag #1651

Closed

Description

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

  1. Follow tutorial step 1: https://nx.dev/angular/tutorial/01-create-application
  2. Follow tutorial step 2: https://nx.dev/angular/tutorial/02-add-e2e-test
  3. See it fail when running: ng e2e todos-e2e --watch
  4. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions