fix: script and script setup in same vue component file (Vue 3) (#541)

Co-authored-by: qhermel <[email protected]>

Author: quienti

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>

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')
+})

packages/vue3-jest/lib/process.js

@@ -164,15 +164,21 @@ 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,
     filename,
     componentNamespace,
     config
   )
+
+  let scriptResult
+  const scriptSetupResult = processScriptSetup(descriptor, filename, config)
+
+  if (!scriptSetupResult) {
+    scriptResult = processScript(descriptor.script, filename, config)
+  }
+
   const output = generateCode({
     scriptResult,
     scriptSetupResult,