fix: lang='tsx' doesn't work for Vue 3 SFC (#547)

Applies the same fix for Vue 2 with this PR: #395

Resolves #510

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

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 {

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