rebsae

e2e/2.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/2.x/basic/test.js

@@ -21,6 +21,7 @@ import Jsx from './components/Jsx.vue'
 import Constructor from './components/Constructor.vue'
 import { compileStyle } from '@vue/component-compiler-utils'
 import ScriptSetup from './components/ScriptSetup'
+import ScriptAndScriptSetup from './components/ScriptAndScriptSetup'
 import ExtendedTsConfig from './components/ExtendedTsConfig.vue'
 
 jest.mock('@vue/component-compiler-utils', () => ({
@@ -165,6 +166,12 @@ test('processes SFC with <script setup>', () => {
   expect(wrapper.html()).toContain('Welcome to Your Vue.js App')
 })
 
+test('processes SFC with both <script> and <script setup> in same component file', () => {
+  const wrapper = mount(ScriptAndScriptSetup)
+  expect(wrapper.html()).toContain('Products: 10')
+  expect(wrapper.html()).toContain('Welcome to Your Vue.js App')
+})
+
 test('handles extended tsconfig.json files', () => {
   const wrapper = mount(ExtendedTsConfig)
   expect(wrapper.element.tagName).toBe('DIV')

e2e/3.x/babel-in-package/components/Tsx.vue

@@ -0,0 +1,7 @@
+<script lang="tsx">
+export default {
+  setup() {
+    return () => <div>tsx components</div>
+  }
+}
+</script>

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

@@ -12,6 +12,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
+    "@vue/babel-plugin-jsx": "^1.1.5",
     "@vue/vue3-jest": "^29.0.0",
     "coffeescript": "^2.3.2",
     "jest": "29.x",
@@ -34,6 +35,9 @@
   "babel": {
     "presets": [
       "@babel/env"
+    ],
+    "plugins": [
+      "@vue/babel-plugin-jsx"
     ]
   }
 }

e2e/3.x/babel-in-package/test.js

@@ -3,6 +3,7 @@ import { createApp, h } from 'vue'
 import TypeScript from './components/TypeScript.vue'
 import Basic from './components/Basic.vue'
 import Coffee from './components/Coffee.vue'
+import Tsx from './components/Tsx.vue'
 
 function mount(Component, props, slots) {
   document.getElementsByTagName('html')[0].innerHTML = ''
@@ -34,3 +35,8 @@ test('processes .vue files with lang set to typescript', () => {
   expect(document.querySelector('#parent').textContent).toBe('Parent')
   expect(document.querySelector('#child').textContent).toBe('Child')
 })
+
+test('processes .vue files with lang set to tsx(typescript)', () => {
+  mount(Tsx)
+  expect(document.querySelector('div').textContent).toContain('tsx components')
+})

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/vue2-jest/lib/process.js

@@ -144,15 +144,20 @@ module.exports = function(src, filename, config) {
   })
 
   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,
     config
   )
 
+  let scriptResult
+  const scriptSetupResult = processScriptSetup(descriptor, filename, config)
+
+  if (!scriptSetupResult) {
+    scriptResult = processScript(descriptor.script, filename, config)
+  }
+
   const isFunctional =
     (descriptor.template &&
       descriptor.template.attrs &&

packages/vue2-jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/vue2-jest",
-  "version": "29.2.2",
+  "version": "29.2.5",
   "description": "Jest transformer for Vue 2",
   "main": "lib/index.js",
   "files": [

packages/vue3-jest/lib/process.js

@@ -19,7 +19,7 @@ const vueComponentNamespace = require('./constants').vueComponentNamespace
 function resolveTransformer(lang = 'js', vueJestConfig) {
   const transformer = getCustomTransformer(vueJestConfig['transform'], lang)
   if (/^typescript$|tsx?$/.test(lang)) {
-    return transformer || typescriptTransformer
+    return transformer || typescriptTransformer(lang)
   } else if (/^coffee$|coffeescript$/.test(lang)) {
     return transformer || coffeescriptTransformer
   } else {
@@ -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,

packages/vue3-jest/lib/transformers/typescript.js

@@ -7,7 +7,7 @@ const {
   getVueJestConfig
 } = require('../utils')
 
-module.exports = {
+module.exports = scriptLang => ({
   process(scriptContent, filePath, config) {
     ensureRequire('typescript', ['typescript'])
     const typescript = require('typescript')
@@ -16,7 +16,7 @@ module.exports = {
 
     const res = typescript.transpileModule(scriptContent, {
       ...tsconfig,
-      fileName: filePath
+      fileName: filePath + (scriptLang === 'tsx' ? '.tsx' : '')
     })
 
     res.outputText = stripInlineSourceMap(res.outputText)
@@ -31,4 +31,4 @@ module.exports = {
 
     return transformer.process(res.outputText, filePath, config)
   }
-}
+})

packages/vue3-jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/vue3-jest",
-  "version": "29.2.2",
+  "version": "29.2.5",
   "description": "Jest Vue transform",
   "main": "lib/index.js",
   "files": [