vuejs · lmiller1990 · Sep 6, 2021 · Aug 30, 2021
diff --git a/e2e/3.x/babel-in-package/package.json b/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",

diff --git a/e2e/3.x/basic/__snapshots__/test.js.snap b/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;

diff --git a/e2e/3.x/basic/components/ScriptSetupSugarRef.vue b/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>
diff --git a/e2e/3.x/basic/package.json b/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",

diff --git a/e2e/3.x/basic/test.js b/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(

diff --git a/e2e/3.x/custom-transformers/package.json b/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",

diff --git a/e2e/3.x/javascript/package.json b/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",

diff --git a/e2e/3.x/style/package.json b/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",

diff --git a/e2e/3.x/typescript-with-babel/package.json b/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",

diff --git a/e2e/3.x/typescript/package.json b/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",

diff --git a/packages/vue3-jest/lib/process.js b/packages/vue3-jest/lib/process.js
@@ -51,7 +51,10 @@ function processScriptSetup(descriptor, filePath, config) {
   if (!descriptor.scriptSetup) {
     return null
   }
-  const content = compileScript(descriptor, { id: filePath })
+  const content = compileScript(descriptor, {
+    id: filePath,
+    refTransform: true
+  })
   const contentMap = mapLines(descriptor.scriptSetup.map, content.map)
 
   const vueJestConfig = getVueJestConfig(config)
@@ -81,7 +84,10 @@ function processTemplate(descriptor, filename, config) {
 
   let bindings
   if (scriptSetup) {
-    const scriptSetupResult = compileScript(descriptor, { id: filename })
+    const scriptSetupResult = compileScript(descriptor, {
+      id: filename,
+      refTransform: true
+    })
     bindings = scriptSetupResult.bindings
   }
 

diff --git a/packages/vue3-jest/package.json b/packages/vue3-jest/package.json
@@ -25,7 +25,7 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@vue/compiler-sfc": "^3.0.3",
+    "@vue/compiler-sfc": "^3.2.6",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.0.0",
     "conventional-changelog": "^1.1.5",
@@ -34,7 +34,7 @@
     "semantic-release": "^15.13.2",
     "ts-jest": "^27.0.1",
     "typescript": "^4.1.2",
-    "vue": "^3.0.3"
+    "vue": "^3.2.6"
   },
   "peerDependencies": {
     "@babel/core": "7.x",