feat: enable sugar ref take 2 for vue3-jest (#377)

Author: cexbrayat

e2e/3.x/babel-in-package/package.json

@@ -7,12 +7,12 @@
     "test": "jest --no-cache test.js"
   },
   "dependencies": {
-    "vue": "^3.0.3"
+    "vue": "^3.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@vue/compiler-sfc": "^3.0.3",
+    "@vue/compiler-sfc": "^3.2.6",
     "coffeescript": "^2.3.2",
     "jest": "^27.0.0",
     "ts-jest": "^27.0.1",

e2e/3.x/basic/__snapshots__/test.js.snap

@@ -37,8 +37,10 @@ exports.render = void 0;
 var vue_1 = require(\\"vue\\");
 var _hoisted_1 = { class: \\"hello\\" };
 function render(_ctx, _cache) {
-    return (vue_1.openBlock(), vue_1.createBlock(\\"div\\", _hoisted_1, [
-        vue_1.createVNode(\\"h1\\", { class: _ctx.headingClasses }, vue_1.toDisplayString(_ctx.msg), 3 /* TEXT, CLASS */)
+    return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)(\\"div\\", _hoisted_1, [
+        (0, vue_1.createElementVNode)(\\"h1\\", {
+            class: (0, vue_1.normalizeClass)(_ctx.headingClasses)
+        }, (0, vue_1.toDisplayString)(_ctx.msg), 3 /* TEXT, CLASS */)
     ]));
 }
 exports.render = render;
@@ -82,8 +84,10 @@ exports.render = void 0;
 var vue_1 = require(\\"vue\\");
 var _hoisted_1 = { class: \\"hello\\" };
 function render(_ctx, _cache) {
-    return (vue_1.openBlock(), vue_1.createBlock(\\"div\\", _hoisted_1, [
-        vue_1.createVNode(\\"h1\\", { class: _ctx.headingClasses }, vue_1.toDisplayString(_ctx.msg), 3 /* TEXT, CLASS */)
+    return ((0, vue_1.openBlock)(), (0, vue_1.createElementBlock)(\\"div\\", _hoisted_1, [
+        (0, vue_1.createElementVNode)(\\"h1\\", {
+            class: (0, vue_1.normalizeClass)(_ctx.headingClasses)
+        }, (0, vue_1.toDisplayString)(_ctx.msg), 3 /* TEXT, CLASS */)
     ]));
 }
 exports.render = render;

e2e/3.x/basic/components/ScriptSetupSugarRef.vue

@@ -0,0 +1,17 @@
+<template>
+  <button @click="increase">Count: {{ num }}</button>
+  <Basic />
+  <span>{{ msg }}</span>
+</template>
+
+<script setup lang="ts">
+import Basic from './Basic.vue'
+
+let num = $ref(5)
+const greet = () => console.log('greet')
+const increase = () => {
+  greet()
+  num.value++
+}
+const msg = 'hello world'
+</script>

e2e/3.x/basic/package.json

@@ -7,12 +7,12 @@
     "test": "jest --no-cache --coverage test.js"
   },
   "dependencies": {
-    "vue": "^3.0.3"
+    "vue": "^3.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
-    "@vue/compiler-sfc": "^3.0.3",
+    "@vue/compiler-sfc": "^3.2.6",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",

e2e/3.x/basic/test.js

@@ -20,6 +20,7 @@ import NoScript from './components/NoScript.vue'
 import PugRelative from './components/PugRelativeExtends.vue'
 import { randomExport } from './components/NamedExport.vue'
 import ScriptSetup from './components/ScriptSetup.vue'
+import ScriptSetupSugarRef from './components/ScriptSetupSugarRef.vue'
 import FunctionalRenderFn from './components/FunctionalRenderFn.vue'
 
 // TODO: JSX for Vue 3? TSX?
@@ -44,6 +45,12 @@ test('supports <script setup>', () => {
   expect(document.body.outerHTML).toContain('Welcome to Your Vue.js App')
 })
 
+test('supports <script setup> with sugar ref', () => {
+  mount(ScriptSetupSugarRef)
+  expect(document.body.outerHTML).toContain('Count: 5')
+  expect(document.body.outerHTML).toContain('Welcome to Your Vue.js App')
+})
+
 test('processes .vue files', () => {
   mount(Basic)
   expect(document.querySelector('h1').textContent).toBe(

e2e/3.x/custom-transformers/package.json

@@ -7,8 +7,8 @@
     "test": "jest --no-cache --coverage test.js"
   },
   "dependencies": {
-    "@vue/compiler-sfc": "^3.0.3",
-    "vue": "^3.0.3"
+    "@vue/compiler-sfc": "^3.2.6",
+    "vue": "^3.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

e2e/3.x/javascript/package.json

@@ -7,7 +7,7 @@
     "test": "jest --no-cache test.js"
   },
   "dependencies": {
-    "vue": "^3.0.3"
+    "vue": "^3.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

e2e/3.x/style/package.json

@@ -7,8 +7,8 @@
     "test": "jest --no-cache test.js"
   },
   "dependencies": {
-    "@vue/compiler-sfc": "^3.0.3",
-    "vue": "^3.0.3"
+    "@vue/compiler-sfc": "^3.2.6",
+    "vue": "^3.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

e2e/3.x/typescript-with-babel/package.json

@@ -7,8 +7,8 @@
     "test": "jest --no-cache ./sub-project/test.js"
   },
   "dependencies": {
-    "@vue/compiler-sfc": "^3.0.3",
-    "vue": "^3.0.3"
+    "@vue/compiler-sfc": "^3.2.6",
+    "vue": "^3.2.6"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

e2e/3.x/typescript/package.json

@@ -7,8 +7,8 @@
     "test": "jest --no-cache ./src/test.ts"
   },
   "dependencies": {
-    "@vue/compiler-sfc": "^3.0.3",
-    "vue": "^3.0.3"
+    "@vue/compiler-sfc": "^3.2.6",
+    "vue": "^3.2.6"
   },
   "devDependencies": {
     "@types/jest": "16.0.10",