Fresh vue install with Vue cli throws error: ReferenceError: SVGElement is not defined

[Melvintehu]

Version

4.5.12

Reproduction link

https://github.com/Melvintehu/vuetestapp/tree/master

Environment info

System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
  Binaries:
    Node: 15.0.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 7.0.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.46)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.0.5
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.12
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.12
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.12
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.12
    @vue/cli-plugin-router:  4.5.12
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.12
    @vue/cli-plugin-unit-mocha: ~4.5.0 => 4.5.12
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.12
    @vue/cli-service: ~4.5.0 => 4.5.12
    @vue/cli-shared-utils:  4.5.12
    @vue/compiler-core:  3.0.11
    @vue/compiler-dom:  3.0.11
    @vue/compiler-sfc: ^3.0.0 => 3.0.11
    @vue/compiler-ssr:  3.0.11
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.0.11
    @vue/runtime-core:  3.0.11
    @vue/runtime-dom:  3.0.11
    @vue/shared:  3.0.11
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.6
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.0.0 => 7.9.0
    typescript: ~4.1.5 => 4.1.5
    vue: ^3.0.0 => 3.0.11
    vue-eslint-parser:  7.6.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.6 (16.2.0)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
    vuex: ^4.0.0-0 => 4.0.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. vue create testapp
2. Manually select features
3. select the following options: Babel, Typescript, Vuex, Linter / Formatter, Unit Testing
4. Select 3.x (Preview)
5. Use class-style component syntax? choose: N
6. Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Choose: Y
7. ESLinkt Prettier
8. Lint on save
9. Mocha Chai
10. In dedicated config files
11. Save this as a preset for future projects? choose: N

What is expected?

When running npm run test:unit the example test that is provided out of the box, should pass instantly.

What is actually happening?

The test fails with the following message:

HelloWorld.vue renders props.msg when passed: ReferenceError: SVGElement is not defined at Object.app.mount (dist\js\webpack:\node_modules\@vue\runtime-dom\dist\runtime-dom.esm-bundler.js:1259:1) at mount (dist\js\webpack:\node_modules\@vue\test-utils\dist\vue-test-utils.esm-bundler.js:7891:1) at shallowMount (dist\js\webpack:\node_modules\@vue\test-utils\dist\vue-test-utils.esm-bundler.js:7910:1) at Context.<anonymous> (dist\js\webpack:\tests\unit\example.spec.ts:8:1) at processImmediate (node:internal/timers:462:21)

---

Have been trying to get vue 3 up and running with a testing framework in a Laravel repo. Had no luck getting it to work. So I started a blank project. Got the same problem.

[fangbinwei]

fixed in #6400, maybe it's better to fix in vue core vuejs/core#3590

[haoqunjiang]

Fixed in v4.5.13