fix: test breaking for script setup

packages/hoppscotch-app/components/smart/Checkbox.vue

@@ -28,17 +28,15 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-
-export default defineComponent({
-  props: {
-    on: {
-      type: Boolean,
-      default: false,
-    },
-  },
-})
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    on: Boolean
+  }>(),
+  {
+    on: false,
+  }
+)
 </script>
 
 <style scoped lang="scss">

packages/hoppscotch-app/components/smart/Toggle.vue

@@ -12,17 +12,15 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-
-export default defineComponent({
-  props: {
-    on: {
-      type: Boolean,
-      default: false,
-    },
-  },
-})
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    on: Boolean
+  }>(),
+  {
+    on: false,
+  }
+)
 </script>
 
 <style scoped lang="scss">

packages/hoppscotch-app/jest-script-setup-transform.js

@@ -0,0 +1,13 @@
+// https://github.com/antfu/unplugin-vue2-script-setup/issues/8
+
+const { raw } = require("unplugin-vue2-script-setup")
+
+const transform = raw().transform
+
+module.exports = {
+  process(source, filename, ...args) {
+    const transformed = transform(source, filename)
+    const code = transformed ? transformed.code : source
+    return require("vue-jest").process.call(this, code, filename, ...args)
+  },
+}

packages/hoppscotch-app/jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
   transform: {
     "^.+\\.ts$": "ts-jest",
     "^.+\\.js$": "babel-jest",
-    ".*\\.(vue)$": "vue-jest",
+    ".*\\.(vue)$": require.resolve("./jest-script-setup-transform.js"),
   },
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
   snapshotSerializers: ["jest-serializer-vue"],

packages/hoppscotch-app/package.json

@@ -154,6 +154,7 @@
     "stylelint-config-standard-scss": "^2.0.1",
     "ts-jest": "^27.0.7",
     "typescript": "^4.4.4",
+    "unplugin-vue2-script-setup": "^0.6.16",
     "vue-jest": "^3.0.7",
     "worker-loader": "^3.0.8"
   }

pnpm-lock.yaml

@@ -149,6 +149,7 @@ importers:
       tern: ^0.24.3
       ts-jest: ^27.0.7
       typescript: ^4.4.4
+      unplugin-vue2-script-setup: ^0.6.16
       uuid: 8.3.2
       vue-apollo: ^3.0.8
       vue-cli-plugin-apollo: ^0.22.2
@@ -282,6 +283,7 @@ importers:
       stylelint-config-standard-scss: 2.0.1_stylelint@14.1.0
       ts-jest: 27.0.7_a7dafc91af6295e122f6cf3cdfbc4ccb
       typescript: 4.4.4
+      unplugin-vue2-script-setup: 0.6.16
       vue-jest: 3.0.7_babel-core@7.0.0-bridge.0
       worker-loader: 3.0.8
 
@@ -745,7 +747,7 @@ packages:
     dependencies:
       '@babel/helper-function-name': 7.16.0
       '@babel/template': 7.16.0
-      '@babel/traverse': 7.16.0
+      '@babel/traverse': 7.16.3
       '@babel/types': 7.16.0
     transitivePeerDependencies:
       - supports-color
@@ -3967,8 +3969,8 @@ packages:
       ufo: 0.7.9
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-27284664.232fdd8:
-    resolution: {integrity: sha512-pmbkBYwS0+qTe7SUK87p/lQk60oHY3LQsoATyVtnnswgTVgkdmarsY/1IgFGg2VXMGTE5moDVW7u+QWg0NVCbQ==}
+  /@nuxt/kit-edge/3.0.0-27286006.a08b435:
+    resolution: {integrity: sha512-nS2pBbeb5KqR91mBlbEQC6aqNBTsJ8eex98A/01LFFYCYPRRRpzBdpvilUpuSdqRkxg8tvkz1o5Mn9quZ3SYeA==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
     dependencies:
       consola: 2.15.3
@@ -3995,7 +3997,7 @@ packages:
   /@nuxt/kit/0.7.0-edge:
     resolution: {integrity: sha512-3+azijGDlERcmhK/Gp97cn8+I++/pn/AmYcj7ceRF++6T86ohckAY0ip/+y4dLlWJ0AGnwB6x4gybG03ltEPew==}
     dependencies:
-      '@nuxt/kit-edge': 3.0.0-27284664.232fdd8
+      '@nuxt/kit-edge': 3.0.0-27286006.a08b435
       jiti: 1.12.9
     dev: true
 
@@ -4825,7 +4827,7 @@ packages:
   /@types/babel__template/7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.16.2
+      '@babel/parser': 7.16.3
       '@babel/types': 7.16.0
     dev: true
 
@@ -5731,7 +5733,6 @@ packages:
       '@vue/shared': 3.2.21
       estree-walker: 2.0.2
       source-map: 0.6.1
-    dev: false
 
   /@vue/component-compiler-utils/3.3.0:
     resolution: {integrity: sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==}
@@ -5770,7 +5771,6 @@ packages:
       '@vue/shared': 3.2.21
       estree-walker: 2.0.2
       magic-string: 0.25.7
-    dev: false
 
   /@vue/runtime-core/3.2.22:
     resolution: {integrity: sha512-e7WOC55wmHPvmoVUk9VBe/Z9k5bJfWJfVIlkUkiADJn0bOgQD29oh/GS14Kb3aEJXIHLI17Em6+HxNut1sIh7Q==}
@@ -5789,7 +5789,6 @@ packages:
 
   /@vue/shared/3.2.21:
     resolution: {integrity: sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA==}
-    dev: false
 
   /@vue/shared/3.2.22:
     resolution: {integrity: sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ==}
@@ -9391,7 +9390,6 @@ packages:
   /entities/3.0.1:
     resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
     engines: {node: '>=0.12'}
-    dev: false
 
   /env-ci/5.0.2:
     resolution: {integrity: sha512-Xc41mKvjouTXD3Oy9AqySz1IeyvJvHZ20Twf5ZLYbNpPPIuCnL/qHCmNlD01LoNy0JTunw9HPYVptD19Ac7Mbw==}
@@ -11458,7 +11456,6 @@ packages:
       domhandler: 4.2.2
       domutils: 2.8.0
       entities: 3.0.1
-    dev: false
 
   /http-cache-semantics/4.1.0:
     resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
@@ -12316,7 +12313,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.16.0
-      '@babel/parser': 7.16.2
+      '@babel/parser': 7.16.3
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.0
@@ -12565,7 +12562,7 @@ packages:
     resolution: {integrity: sha512-WK11ZUetDQaC09w4/j7o4FZDUIp+4iYWH/Lik34Pv7ukL+DuXFGdnmmi7dT58J2ZYKFB5r13GyE0z3NPeyJmsg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
-      '@babel/traverse': 7.16.0
+      '@babel/traverse': 7.16.3
       '@jest/environment': 27.3.1
       '@jest/source-map': 27.0.6
       '@jest/test-result': 27.3.1
@@ -12789,9 +12786,9 @@ packages:
     dependencies:
       '@babel/core': 7.16.0
       '@babel/generator': 7.16.0
-      '@babel/parser': 7.16.2
+      '@babel/parser': 7.16.3
       '@babel/plugin-syntax-typescript': 7.16.0_@babel+core@7.16.0
-      '@babel/traverse': 7.16.0
+      '@babel/traverse': 7.16.3
       '@babel/types': 7.16.0
       '@jest/transform': 27.3.1
       '@jest/types': 27.2.5
@@ -18560,7 +18557,6 @@ packages:
       - supports-color
       - vite
       - webpack
-    dev: false
 
   /unplugin/0.2.21:
     resolution: {integrity: sha512-IJ15/L5XbhnV7J09Zjk0FT5HEkBjkXucWAXQWRsmEtUxmmxwh23yavrmDbCF6ZPxWiVB28+wnKIHePTRRpQPbQ==}
@@ -18577,7 +18573,6 @@ packages:
         optional: true
     dependencies:
       webpack-virtual-modules: 0.4.3
-    dev: false
 
   /unquote/1.1.1:
     resolution: {integrity: sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=}