Vue3 migration

babel.config.js

@@ -1,10 +1,7 @@
 module.exports = {
-  presets: [
-    "@vue/cli-plugin-babel/preset",
-    "@babel/preset-env"
-  ],
+  presets: ["@babel/preset-env"],
   plugins: [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-private-methods'
-  ]
-};
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-private-methods",
+  ],
+};

jest-setup.js

@@ -1,6 +1,10 @@
+/*
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 import Particles from 'vue2-particles'
 
 Vue.use(Particles);
-Vue.use(Vuetify);
+Vue.use(Vuetify);
+*/
+
+// Nothing to see here, please move along...

jest.config.js

@@ -1,9 +1,7 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest",
+  testEnvironment: "jsdom",
   collectCoverage: true,
-  coverageReporters: [
-    "lcov"
-  ],
+  coverageReporters: ["lcov", "html"],
   collectCoverageFrom: [
     "src/**/*.{js,vue}",
     "!src/main.js",
@@ -13,21 +11,20 @@ module.exports = {
     "!src/router/routes.js",
     "!src/components/Icon/Icon.vue",
   ],
+  coveragePathIgnorePatterns: ["/node_modules/", "/tests/"],
   testMatch: [
-    "**/**.spec.js", "**/**/**.spec.js", "tests/**/**.spec.js", "tests/**/**/**.spec.js"
-  ],
-  setupFiles: [
-    "./jest-setup.js",
-    "trace-unhandled/register"
-  ],
-  "moduleFileExtensions": [
-    "js",
-    "json",
-    "vue"
+    "**/**.spec.js",
+    "**/**/**.spec.js",
+    "tests/**/**.spec.js",
+    "tests/**/**/**.spec.js",
   ],
+  setupFiles: ["./jest-setup.js", "trace-unhandled/register"],
+  moduleFileExtensions: ["js", "json", "vue"],
   transform: {
-    '^.*\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    "^.*\\.js$": "babel-jest",
+    ".*\\.(vue)$": "@vue/vue3-jest",
   },
-  transformIgnorePatterns: ['node_modules/(?!vue-router|@babel|vuetify|vue2-particles)']
-};
+  transformIgnorePatterns: [
+    "node_modules/(?!vue-router|@babel|vuetify|tsparticles)",
+  ],
+};

package.json

@@ -1,11 +1,11 @@
 {
   "name": "FAIRsharing-Assistant",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --port 8082",
     "build": "vue-cli-service build --modern",
-    "test:unit": "vue-cli-service test:unit --coverage",
+    "test:unit": "jest --coverage=true",
     "lint": "vue-cli-service lint",
     "lint:fix": "vue-cli-service lint --fix",
     "codacy": "cat ./coverage/lcov.info | codacy-coverage -t ",
@@ -16,57 +16,55 @@
     "@babel/polyfill": "^7.12.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@fortawesome/vue-fontawesome": "^3.0.0",
+    "@tsparticles/vue3": "^3.0.1",
     "axios": "^0.27.2",
     "babel-core": "^7.0.0-bridge.0",
     "core-js": "^3.28.0",
     "dotenv": "^16.0.3",
-    "jest": "^27.5.1",
     "jest-offline": "^1.0.1",
     "lodash": "^4.17.21",
     "roboto-fontface": "*",
     "trace-unhandled": "^2.0.1",
-    "tsparticles": "^2.8.0",
-    "vue": "^2.7.16",
-    "vue-class-component": "^7.2.6",
+    "tsparticles": "^3.5.0",
+    "vue": "^3.1.0",
+    "vue-3-sanitize": "^0.1.4",
     "vue-eslint-parser": "^9.1.0",
-    "vue-jest": "^3.0.7",
     "vue-loader": "^17.2.2",
-    "vue-router": "^3.4.3",
-    "vue-sanitize": "^0.2.3",
-    "vue2-particles": "^2.8.0",
-    "vuetify": "^2.6.10",
-    "vuex": "^3.6.2",
+    "vue-router": "^4.0.0",
+    "vuetify": "^3.6.13",
+    "vuex": "^4.0.2",
     "webpack": "^5.88.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
     "@babel/eslint-parser": "^7.21.8",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-private-methods": "^7.16.11",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.24.8",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.7",
-    "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "@vue/test-utils": "^1.1.3",
-    "@vue/vue2-jest": "^27.0.0-alpha.3",
+    "@vue/compiler-sfc": "^3.1.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "^29.2.6",
+    "babel-jest": "^29.7.0",
     "codacy-coverage": "^3.4.0",
     "compression-webpack-plugin": "^10.0.0",
     "css-loader": "^5.2.7",
     "eslint": "^8.42.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "ink-docstrap": "^1.3.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdoc": "^4.0.0",
     "jsdoc-vuejs": "^3.0.9",
     "jsdoc-vuex-plugin": "^1.0.0",
     "sass": "~1.32.12",
     "sass-loader": "^10.1.1",
     "sinon": "^7.5.0",
-    "vue-cli-plugin-vuetify": "~2.5.8",
-    "vue-template-compiler": "^2.7.15",
-    "vuetify-loader": "^1.7.0"
+    "vue-cli-plugin-vuetify": "~2.5.8"
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <v-app id="app">
-    <div class="d-flex appWrapper fill-height flex-column justify-space-between">
+    <div
+      class="d-flex appWrapper fill-height flex-column justify-space-between"
+    >
       <router-view />
       <Footer />
     </div>
@@ -10,19 +12,19 @@
 <script>
 import Footer from "@/components/Others/Footer.vue";
 export default {
-  name: 'App',
-  components:{Footer},
+  name: "App",
+  components: { Footer },
   data() {
     return {
-      loading:true,
-    }
+      loading: true,
+    };
   },
   /* istanbul ignore next */
   async updated() {
     // very important line of code which prevents layout shifting which is considered as one negative point for SEO
-    await this.$nextTick()
+    await this.$nextTick();
     this.loading = false;
-  }
+  },
 };
 </script>
 
@@ -33,7 +35,8 @@
   min-height: 99vh;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }