[cypress] test:e2e doesn't run in headless mode if project uses cli-plugin-typescript

[cexbrayat]

Version

3.1.1

Reproduction link

https://github.com/cexbrayat/vue-cypress-e2e-issue

Node and OS info

Node 8.11, npm 6.4, macOS 10.14

Steps to reproduce

npx @vue/cli@3.1.1 create vue-cypress-e2e-issue --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-typescript": {"classComponent": true,"tsLint": true,"lintOn": ["save"]},"@vue/cli-plugin-unit-jest": {},"@vue/cli-plugin-e2e-cypress": {}}}'

# or git clone https://github.com/cexbrayat/vue-cypress-e2e-issue

cd vue-cypress-e2e-issue
npm run test:e2e -- --headless

What is expected?

When running npm run test:e2e -- --headless, the test should complete.

What is actually happening?

The task hangs and never runs the test nor fails or completes.

It logs:

vue-cypress-e2e-issue git:master ❯ npm run test:e2e -- --headless

> vue-cypress-e2e-issue@0.1.0 test:e2e /Users/ced-pro/Code/test/vue/vue-cypress-e2e-issue
> vue-cli-service test:e2e "--headless"

 INFO  Starting e2e tests...
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit


 DONE  Compiled successfully in 2012ms                                                                                            11:45:27 AM

Type checking and linting in progress...

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.150.187:8080/

  App is served in production mode.
  Note this is for preview or E2E testing only.

No type errors found
No lint errors found
Version: typescript 3.1.6, tslint 5.11.0
Time: 2246ms

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.1.1                                                                              │
  │ Browser:    Electron 59 (headless)                                                             │
  │ Specs:      1 found (test.js)                                                                  │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running: test.js...                                                                      (1 of 1)
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit


 DONE  Compiled successfully in 2994ms

And hangs there indefinitely.

Note that it works well if not in headless mode.

---

The project uses cli-plugin-typescript. The e2e tests run fine if not in headless mode.

If TypeScript is not used, the e2e tests are fine in headless mode or not.

Workaround

Commenting:

module.exports = (on, config) => {
  on('file:preprocessor', webpack({
    // webpackOptions: require('@vue/cli-service/webpack.config'),
    watchOptions: {}
  }))

in tests/e2e/plugins/index.js fixes the issue.
The task then run fine in headless mode as well.

Might be related to #2783 but in this case I never have a complete run not even the first one.

[LinusBorg]

@sodatea This is another issue that the webpack preprocessor introduces

And as far as I understand it, we only added it to support aliases (that was the feature request mentioned in the commit, at least).

So I think we should consider dropping this thing if that's the only real selling point (or go in deep and figure out how to make this work reliably)

People who want to use it can add those 2-3 lines themselves, we could even keep them in the cypress config file commented out, with a hint to install the preprocessor package to make it work.

But right now, this preprocessor seems to cause more problems than it adds value

[cexbrayat]

@LinusBorg 👍 do you want me to submit a PR that removes the file:preprocessor from https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-plugin-e2e-cypress/generator/template/tests/e2e/plugins/index.js ? Should the webpack prepropcessor also be removed from https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-e2e-cypress/generator/index.js or should we keep it?

[LinusBorg]

I'd like to get @sodatea's view on this first. If he's on the same page, you can submit a PR, sure.

[haoqunjiang]

@LinusBorg Yeah I think so. There are so many bug in the webpack preprocessor that I think we'd better make it opt in.

@cexbrayat Go ahead please. (Note: the lines in package.json should be removed as well)

IMO commenting them out could be a semver minor now that they only present in the generator folder. Any thoughts on this?

[LinusBorg]

IMO commenting them out could be a semver minor now that they only present in the generator folder. Any thoughts on this?

Hm, not sure.

Existing projects that currently have this preprocessor configured would have their builds fail after updating the cypress package, since fresh npm install calls wouldn't install the preprocessor dependency anymore.

We could keep the dependency so existing projects don't break, and remove it in the next major?

Or we take the position that removing this dependency is necessary to fix some serious bugs, and that solving the problem this change creates for existing projects (could not resolve module '@cypress/webpack-preprocessor') would be easy enough to fix to accept it as a side-effect of this bugfix.

IMHO it's not easy to decide what's a semver breaking change for a project like vue-cli

[cexbrayat]

@sodatea @LinusBorg Ok done in #2904

I kept the dependency for now. This is my first contribution to vue-cli but I contribute quite often to Angular CLI and this would be a breaking change to remove the dep, and would only be done in the next major (they have a 6 months cycle per major release).

Let me know how the PR can be improved (I also added a test for cypress and TS).

[haoqunjiang]

Existing projects that currently have this preprocessor configured would have their builds fail after updating the cypress package, since fresh npm install calls wouldn't install the preprocessor dependency anymore.

Actually this dependency is injected into package.json once the generator gets called so no existing project will break.

vue-cli/packages/@vue/cli-plugin-e2e-cypress/generator/index.js

Lines 7 to 10 in 662b1d3

	api.extendPackage({
	devDependencies: {
	'@cypress/webpack-preprocessor': '^3.0.0'
	},

[cexbrayat]

@sodatea 👌 I'm going to remove the dependency in the PR then.