From 3605c5e7b96a63fbd89055d57b521b954ee82af2 Mon Sep 17 00:00:00 2001
From: quienti <hermel.quentin@gmail.com>
Date: Thu, 27 Apr 2023 02:10:53 +0200
Subject: [PATCH] fix: script and script setup in same vue component file (Vue
 3) (#541)

Co-authored-by: qhermel <quentin.hermel@preventeo.com>
---
 .../basic/components/ScriptAndScriptSetup.vue | 23 +++++++++++++++++++
 e2e/3.x/basic/test.js                         |  7 ++++++
 packages/vue3-jest/lib/process.js             | 10 ++++++--
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 e2e/3.x/basic/components/ScriptAndScriptSetup.vue

diff --git a/e2e/3.x/basic/components/ScriptAndScriptSetup.vue b/e2e/3.x/basic/components/ScriptAndScriptSetup.vue
new file mode 100644
index 00000000..e3aa2fcb
--- /dev/null
+++ b/e2e/3.x/basic/components/ScriptAndScriptSetup.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <button @click="increase">Products: {{ products }}</button>
+    <Basic />
+    <span>{{ msg }}</span>
+  </div>
+</template>
+
+<script>
+import Basic from './Basic.vue'
+</script>
+
+<script setup>
+import { ref } from 'vue'
+
+const products = ref(10)
+const greet = () => console.log('greet')
+const increase = () => {
+  greet()
+  num.value++
+}
+const msg = 'hello world'
+</script>
diff --git a/e2e/3.x/basic/test.js b/e2e/3.x/basic/test.js
index 3a5dddaa..504c44c7 100644
--- a/e2e/3.x/basic/test.js
+++ b/e2e/3.x/basic/test.js
@@ -24,6 +24,7 @@ import ScriptSetupSugarRef from './components/ScriptSetupSugarRef.vue'
 import FunctionalRenderFn from './components/FunctionalRenderFn.vue'
 import CompilerDirective from './components/CompilerDirective.vue'
 import ExtendedTsConfig from './components/ExtendedTsConfig.vue'
+import ScriptAndScriptSetup from './components/ScriptAndScriptSetup.vue'
 
 // TODO: JSX for Vue 3? TSX?
 import Jsx from './components/Jsx.vue'
@@ -214,3 +215,9 @@ test('handles extended tsconfig.json files', () => {
   const elm = document.querySelector('div')
   expect(elm).toBeDefined()
 })
+
+test('processes SFC with both <script> and <script setup> in same component file', () => {
+  mount(ScriptAndScriptSetup)
+  expect(document.body.outerHTML).toContain('Products: 10')
+  expect(document.body.outerHTML).toContain('Welcome to Your Vue.js App')
+})
diff --git a/packages/vue3-jest/lib/process.js b/packages/vue3-jest/lib/process.js
index a8d1c5c9..ff1e3de6 100644
--- a/packages/vue3-jest/lib/process.js
+++ b/packages/vue3-jest/lib/process.js
@@ -164,8 +164,6 @@ module.exports = function(src, filename, config) {
     getVueJestConfig(config)['componentNamespace'] || vueComponentNamespace
 
   const templateResult = processTemplate(descriptor, filename, config)
-  const scriptResult = processScript(descriptor.script, filename, config)
-  const scriptSetupResult = processScriptSetup(descriptor, filename, config)
   const stylesResult = processStyle(descriptor.styles, filename, config)
   const customBlocksResult = processCustomBlocks(
     descriptor.customBlocks,
@@ -173,6 +171,14 @@ module.exports = function(src, filename, config) {
     componentNamespace,
     config
   )
+
+  let scriptResult
+  const scriptSetupResult = processScriptSetup(descriptor, filename, config)
+
+  if (!scriptSetupResult) {
+    scriptResult = processScript(descriptor.script, filename, config)
+  }
+
   const output = generateCode({
     scriptResult,
     scriptSetupResult,