E2E tests fails on projects generated with typescript and vue-router.

[TETRA2000]

Version

4.4.6

Reproduction link

https://github.com/TETRA2000/vue-ts-app

Environment info

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 12.16.3 - ~/.nodenv/versions/12.16.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nodenv/versions/12.16.3/bin/npm
  Browsers:
    Chrome: 84.0.4147.89
    Edge: 84.0.522.40
    Firefox: 78.0.2
    Safari: 13.1.2
  npmPackages:
    @vue/cli-overlay:  4.4.6
    @vue/cli-plugin-e2e-cypress: ~4.4.0 => 4.4.6
    @vue/cli-plugin-router: ~4.4.0 => 4.4.6
    @vue/cli-plugin-typescript: ~4.4.0 => 4.4.6
    @vue/cli-plugin-unit-mocha: ~4.4.0 => 4.4.6
    @vue/cli-plugin-vuex:  4.4.6
    @vue/cli-service: ~4.4.0 => 4.4.6
    @vue/cli-shared-utils:  4.4.6
    @vue/component-compiler-utils:  3.1.2
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: ^1.0.3 => 1.0.3
    @vue/web-component-wrapper:  1.2.0
    typescript: ~3.9.3 => 3.9.7
    vue: ^2.6.11 => 2.6.11
    vue-class-component: ^7.2.3 => 7.2.3
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.3
    vue-property-decorator: ^8.4.2 => 8.5.1
    vue-router: ^3.2.0 => 3.3.4
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 4.4.6

Steps to reproduce

1.Create a new project with these configuration.

 ◉ TypeScript
 ◉ Router
 ◉ Unit Testing
 ◉ E2E Testing

(Others are off)

2.Run yarn test:e2e.

What is expected?

E2E should pass without errors.

What is actually happening?

E2E fails to match h1 text.

src/views/Home.vue

    <HelloWorld msg="Welcome to Your Vue.js App"/>

tests/e2e/specs/test.js

    cy.contains('h1', 'Welcome to Your Vue.js + TypeScript App')

---

I suspected that these replacement code aren't running correctly.

vue-cli/packages/@vue/cli-plugin-typescript/generator/template/src/views/Home.vue

Lines 1 to 11 in c98f76a

	---
	extend: '@vue/cli-plugin-router/generator/template/src/views/Home.vue'
	when: "rootOptions.plugins && rootOptions.plugins['@vue/cli-plugin-router']"
	replace:
	- !!js/regexp /Welcome to Your Vue\.js App/
	- !!js/regexp /<script>[^]*?<\/script>/
	---
	<%# REPLACE %>
	Welcome to Your Vue.js + TypeScript App
	<%# END_REPLACE %>

[TETRA2000]

I found that this is caused by plugins order in GereratorAPI.
Plugins are sorted like this at first.

So, @vue/cli-plugin-typescript is executed at first. Then @vue/cli-plugin-router is executed.

I crated dirty patch like this to swap these plugin's order.

diff --git a/packages/@vue/cli/lib/Creator.js b/packages/@vue/cli/lib/Creator.js
index 04275937..8cd021f0 100644
--- a/packages/@vue/cli/lib/Creator.js
+++ b/packages/@vue/cli/lib/Creator.js
@@ -183,6 +183,13 @@ module.exports = class Creator extends EventEmitter {
     log(`🚀  Invoking generators...`)
     this.emit('creation', { event: 'invoking-generators' })
     const plugins = await this.resolvePlugins(preset.plugins, pkg)
+    const tsPluginIdx = plugins.findIndex(p => p.id === '@vue/cli-plugin-typescript')
+    const tsPlugin = plugins[tsPluginIdx]
+    // Remove ts plugin
+    plugins.splice(tsPluginIdx, 1)
+    // Insert ts plugin after router
+    const routerPluginIdx = plugins.findIndex(p => p.id === '@vue/cli-plugin-router')
+    plugins.splice(routerPluginIdx + 1, 0, tsPlugin)
     const generator = new Generator(context, {
       pkg,
       plugins,

Plugins are sorted like this with this patch.

I created new project with same options.
Then I got this template.

// src/views/Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

...

Entire project is available here.

[TETRA2000]

This will be fixed in df93f46
#5697 (comment)

[haoqunjiang]

Fixed in v4.5.3