diff --git a/packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js b/packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js
index fbfd18ec22..69879d0611 100644
--- a/packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js
+++ b/packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js
@@ -1,6 +1,33 @@
 const { installedBrowsers } = require('@vue/cli-shared-utils')
 
-module.exports = (api, { webdrivers }) => {
+const applyTS = module.exports.applyTS = (api, invoking) => {
+  api.extendPackage({
+    devDependencies: {
+      '@types/mocha': '^8.0.1'
+    }
+  })
+
+  // inject types to tsconfig.json
+  if (invoking) {
+    api.render(files => {
+      const tsconfig = files['tsconfig.json']
+      if (tsconfig) {
+        const parsed = JSON.parse(tsconfig)
+        const types = parsed.compilerOptions.types
+        if (types) {
+          for (const t of ['mocha', '@wdio/mocha-framework', '@wdio/sync']) {
+            if (!types.includes(t)) {
+              types.push(t)
+            }
+          }
+        }
+        files['tsconfig.json'] = JSON.stringify(parsed, null, 2)
+      }
+    })
+  }
+}
+
+module.exports = (api, { webdrivers }, rootOptions, invoking) => {
   api.render('./template', {
     hasTS: api.hasPlugin('typescript'),
     hasESLint: api.hasPlugin('eslint')
@@ -36,4 +63,8 @@ module.exports = (api, { webdrivers }) => {
     },
     devDependencies
   })
+
+  if (api.hasPlugin('typescript')) {
+    applyTS(api, invoking)
+  }
 }
diff --git a/packages/@vue/cli-plugin-e2e-webdriverio/package.json b/packages/@vue/cli-plugin-e2e-webdriverio/package.json
index 401b993a86..b248f12a9a 100644
--- a/packages/@vue/cli-plugin-e2e-webdriverio/package.json
+++ b/packages/@vue/cli-plugin-e2e-webdriverio/package.json
@@ -25,6 +25,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@types/mocha": "^8.0.1",
     "@vue/cli-shared-utils": "^4.5.2",
     "@wdio/cli": "^6.1.11",
     "@wdio/local-runner": "^6.1.11",
diff --git a/packages/@vue/cli-plugin-typescript/generator/index.js b/packages/@vue/cli-plugin-typescript/generator/index.js
index 7521fc9992..713bd33bfc 100644
--- a/packages/@vue/cli-plugin-typescript/generator/index.js
+++ b/packages/@vue/cli-plugin-typescript/generator/index.js
@@ -88,6 +88,11 @@ module.exports = (api, {
       // eslint-disable-next-line node/no-extraneous-require
       require('@vue/cli-plugin-eslint/generator').applyTS(api)
     }
+
+    if (api.hasPlugin('e2e-webdriverio')) {
+      // eslint-disable-next-line node/no-extraneous-require
+      require('@vue/cli-plugin-e2e-webdriverio/generator').applyTS(api)
+    }
   }
 
   api.render('./template', {
diff --git a/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json b/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json
index 5158c8700a..435584d986 100644
--- a/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json
+++ b/packages/@vue/cli-plugin-typescript/generator/template/tsconfig.json
@@ -22,6 +22,7 @@
     "types": [
       "webpack-env"<% if (hasMocha || hasJest || hasWebDriverIO) { %>,<% } %>
       <%_ if (hasWebDriverIO) { _%>
+      <% if (!hasMocha && !hasJest) { %>"mocha",<% } %>
       "@wdio/mocha-framework",
       "@wdio/sync"<% if (hasMocha || hasJest) { %>,<% } %>
       <%_ } _%>