Object rest and spread properties are not supported by Electron with Chrome 59

[gotbahn]

Hey guys, could you update Chrome in your Electron, please? Next version has the normal support of Object rest and spread properties. Now we have to create a separate build for Cypress.

Current behavior:

Tests failed because of unknown syntax

Desired behavior:

Tests work, syntax recognized

Steps to reproduce:

1. Use object rest and spread properties in code
2. Run tests in headless mode

Versions

Cypress 3.0.2

[brian-mann]

Sure, we can do that. Curious why you wouldn't just transpile your test code using babel/webpack?

[gotbahn]

We actually doing that now. But this takes build time, extra configuration, extra jobs and extra dependencies that could be omitted.

[edouard-lopez]

Still getting the issue with "cypress": "^3.1.2".

Is there a babel configuration to circumvent this ?

[edouard-lopez]

Still having the issue despite installing @babel/plugin-transform-spread

yarn add --dev @babel/plugin-transform-spread browserslist

package.json/scripts

"@babel/plugin-transform-spread": "^7.0.0",
"browserslist": "^4.3.4",

package.json/babel

  "babel": {
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-transform-spread"
    ]
  },

package.json/browserslist

  "browserslist": [
    "Electron >= 1.8",
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]

[edouard-lopez]

My app doesn't throw any exception, either in development or production mode, when in run in the browser. Only cypress complains

Solution with --browser

I switch to my Linux Mint laptop and was able to run the test with the --browser chromium option. However I want to run my tests on travis without installing an extra browser and Chromium isn't available by default.

Solution with uncaught:exception app event

So I went for the solution to disable uncaught exception from app in cypress/support/index.js:

Cypress.on("uncaught:exception", (err, runnable) => {
  console.debug(">> uncaught:exception disabled in cypress/support/index.js");
  return false;  // prevents Cypress from failing the test
});

@jennifer-shehane, @brian-mann I'm not really fund of this solution as it disable all exceptions. Could you point to a working babel@7+webpack@4 configuration?

[jennifer-shehane]

There are examples of webpack preprocessor configs in our https://github.com/cypress-io/cypress-webpack-preprocessor repo

[cake-jnorman]

@jennifer-shehane

I don't think the material at that target location addresses the problem that some of us are seeing. I've seen you post that in several issues, and yet it doesn't really appear to address the question at hand.

My code is being transpiled and it runs just fine in both dev and production builds. but when i try to run cypress coupled with the cypress-webpack-preprocessor i get the "SyntaxError: Unexpected token ..." error (the spread operator), referring to a line in my webpack config file. The fact that several people are asking about this particular issue probably means that the documentation alone is enough.

(I think my problem is that i have the spread operator used in my webpack.config file. spread operators in the rest of my code cause no issue for cypress. I am importing my webpack.config file largely to get my path aliases. I can confirm that cypress | cypress-webpack blow up the moment I import my webpack.config.)

Is there any chance that we can get get a bit of elaboration on this issue? Cypress is awesome. This issue however, is driving me mad. (Yes, i may just be an idiot... but it appears that i am not alone)

Thank you!

(Note: my solution was to use lodash's assign within my webpack.config instead of the spread operator)

[theotherdon]

@cake-jnorman If I'm understanding your problem correctly, it sounds to me like one of your Cypress tests is requiring a file that contains a spread operator. As mentioned above, Electron (or maybe just this version of Electron - I'm not entirely sure) doesn't support the spread operator. So, when Cypress tries to require the file, it throws that error.

Other than the workaround you mentioned, you can solve this issue by using one of the Docker images that contains Chrome (cypress/browsers:chrome67 in my case) and telling Cypress to use Chrome with the --browser chrome option: yarn cypress run --browser chrome. Unfortunately, this option doesn't support screen recordings, so that's something to keep in mind.

[nachocab]

Sure, we can do that. Curious why you wouldn't just transpile your test code using babel/webpack?

@brian-mann I'm running into this issue with Typescript after using your recipe. It says that webpack-preprocessor handless babel, so I don't understand why I get the Error: Unexpected token ...

[imranismail]

I'm still facing this problem.

I didn't do anything fancy but just added a new command using existing commands from cypress, and this error pops up.

The following code snippet is the custom command that I've added on top of a fresh project:

Cypress.Commands.add('login', (code, phone) => {
  cy.visit('/');
  cy.getCookie('accessToken').should('be.null');
  cy.contains('a', 'account_circle').click();
  cy.url().should('include', 'login');
  cy.contains('a', 'Continue with phone number').click();
  cy.url().should('include', 'auth');
  cy.get('select[name="countryCode"]').select(code);
  cy.get('input[name="phone"]').type(phone));
  cy.contains('button', 'Continue').click();
  cy.url().should('include', 'verify');
  cy.get('input[name=code]').type('1337');
  cy.get('button').contains('Verify').click();
  cy.url().should('not.include', 'login')
          .and('not.include', 'verify')
          .and('not.include', 'auth')

  return cy.getCookie('accessToken');
})

EDIT: It works fine on the open CLI command though.

[kabukki]

In my case, I transpiled everything correctly, the "..." syntax came from a vendor bundle.

[gotbahn]

How hard Cypress coupled to this version of Electron?

Because web always moves on and sticking with this version will bring more and more issues in future.

[jennifer-shehane]

Electron upgrade is planned to be released in version 4.0 5.0

[hcharley]

@jennifer-shehane Are there any updates on the release of 4.0? (I don't see 4.0 mentioned on the roadmap.)

I ask because I just stumbled across this issue.

[tuxd]

ts-loader module itself which runs inside the cypress electron js context requires the {..., nonsense}

I want my lief back!!

[pikadanx]

@tuxd I ran into the same issue with ts-loader@6.0.0.

Downgrading to ts-loader@5.4.5 solved the spread operator issue for me.

[PinkyJie]

me too, I upgraded ts-loader to version 6, then got the same issue.

[brian-mann]

We recently upgraded Electron in the last release (today) - which went from Chromium 59 to 61. As part of that release we spent a lot of time upgrading the internal network layer to accommodate the next series of Electron upgrades.

[gotbahn]

@brian-mann great news! thank you

[Manny91]

How can I update the version that Cypress latest release(3.2.0) is using so I can fix it?

[Asjas]

@Manny91 The latest Cypress release is 3.3.1 and is based on Chromium 74. So just update the Cypress npm package to the latest release.

[flotwig]

@Asjas Cypress 3.3.1 bundles Electron 2, which is the equivalent of Chromium 64.

[sainthkh]

@jennifer-shehane @flotwig

It is now solved in Cypress 3.8.3. I guess it might have been solved from 3.8.0 (Electron 7.x update).

Test:

it('test', () => {
  const aa = {
    a: 'str',
    b: 1234,
  }

  const bb = {
    ...aa,
    c: 333,
  }

  const { a, ...z } = bb

  expect(bb.b).to.eq(1234)
  expect(a).to.eq('str')
  expect(z).to.deep.eq({
    b: 1234,
    c: 333,
  })
})

Ran test with command npm run cypress:run -- --spec=/home/sainthkh/src/cypress/packages/driver/test/cypress/integration/issues/test.js

Maybe, we need 2069_spec.js. Right?

[jennifer-shehane]

Closing as resolved.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.