fix(presets): update init templates for 4.0 release

[nicojs]

Update the VueJS, react and angular presets for the 4.0 release.

Closes #2521

[nicojs]

I've updated the presets in this PR. There is however an issue with the vuejs preset.

The VueJS preset is quite old. It actually is not compatible with the vue cli. If you want to get your vue cli project to work with Stryker, your best chance at the moment is to look at our e2e tests (so either vue-cli-javascript-jest or vue-cli-typescript-mocha depending on which test runner you are using). I think we might want to add better vue support in the future, but especially with mocha, that isn't easy.

But, what to do with the vue preset in the meantime? 🤷‍♂️

[bartekleon]

neat! So much code went out.
E2E tests are working with VUE, and not much needs to be done.
https://github.com/stryker-mutator/stryker/files/5320815/tests.zip
Basic project made out of our E2E tests :)

[nicojs]

E2E tests are working with VUE, and not much needs to be done.

I disagree. Quite a lot needs to be done to make vue work with mocha actually.

1. Create a custom "webpack.test.config.js" with this content:

   const conf = require('@vue/cli-service/webpack.config.js');
   conf.entry = {
     tests: ['./test.js']
   }
   module.exports = conf;

2. Create a custom "test.js" with the following content:

   require('./test/setup.js'); // your setup file here.
   
   // Then we find all the tests.
   const context = require.context('./src', true, /\.spec\.ts$/);
   // And load the modules.
   context.keys().map(context);

3. Install "webpack-cli" (vue-cli projects don't have this installed out-of-the-box)
4. Create a "stryker.conf.json" with the following content:

   {
    "buildCommand": "webpack --config webpack.test.config.js",
    "mochaOptions": {
       "require": [
         "@vue/cli-plugin-unit-mocha/setup.js"
       ],
       "spec": ["dist/js/chunk-vendors.js", "dist/js/tests.js"]
     },
   }

5. Run stryker with NODE_ENV=test VUE_CLI_BABEL_TARGET_NODE=true stryker run (needs to be reworked)

Even with this, it might not work as expected, because there are still differences between Stryker's way of running the tests and vue-cli way of running it.

Basically, vue-cli it is a big mess IMHO. Vue cli uses mocha-pack with additional stuff. mocha-pack uses webpack and mocha with additional stuff. No fun for Stryker.

At this point, I feel like we have 3 options.

1. Drop support for Vue CLI during stryker init altogether. Just point people to our e2e test setup in docs.
2. Or do a PR on the vue cli itself to improve the mess they made.
3. Add a projectType: 'vue-cli' to the mocha runner (not a fan of this, might not be possible at all actually).

[bartekleon]

Oww... i havent checked Mocha yet. Only Jest since we have jest tests for vue :/

I think we should just make another E2E, VUE + Mocha, and if someones uses CLI it should just point to that package. At least for now

[nicojs]

I think we should just make another E2E

What's wrong with the existing one?

[simondel]

@nicojs Does the situation improve now Vue v3 is live?

[nicojs]

Nope they're still using the mochapack spaghetti

[bartekleon]

I think we should just make another E2E

What's wrong with the existing one?

"Quite a lot needs to be done to make vue work with mocha actually."
Maybe we both misunderstand each other. :x What i am saying is that we should make it easy to go from E2E mocha-vue to user app (small changes in configs and it works)

[nicojs]

I've updated the vuejs guide: https://github.com/stryker-mutator/stryker-handbook/blob/master/stryker/guides/vuejs.md#vuejs and I've updated the vue templates that are generated when a user chooses mocha.

I've managed to remove step 2: "Create a custom "test.js" with the following content: ", but I'm still not happy with the result. At least it does work with a standard vue-cli project a.t.m.

IMO we can release v4 with this... I guess.

[nicojs]

What i am saying is that we should make it easy to go from E2E mocha-vue to user app (small changes in configs and it works)

I tried my best, but I cannot bend steel with my bare hands 😑