Skip to content

Commit b3238b2

Browse files
authored
fix: lang='tsx' doesn't work for Vue 3 SFC (#547)
Applies the same fix for Vue 2 with this PR: #395 Resolves #510
1 parent 972e5aa commit b3238b2

File tree

6 files changed

+207
-7
lines changed

6 files changed

+207
-7
lines changed

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="tsx">
2+
export default {
3+
setup() {
4+
return () => <div>tsx components</div>
5+
}
6+
}
7+
</script>

Diff for: e2e/3.x/babel-in-package/package.json

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"devDependencies": {
1313
"@babel/core": "^7.9.0",
1414
"@babel/preset-env": "^7.9.0",
15+
"@vue/babel-plugin-jsx": "^1.1.5",
1516
"@vue/vue3-jest": "^29.0.0",
1617
"coffeescript": "^2.3.2",
1718
"jest": "29.x",
@@ -34,6 +35,9 @@
3435
"babel": {
3536
"presets": [
3637
"@babel/env"
38+
],
39+
"plugins": [
40+
"@vue/babel-plugin-jsx"
3741
]
3842
}
3943
}

Diff for: e2e/3.x/babel-in-package/test.js

+6
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { createApp, h } from 'vue'
33
import TypeScript from './components/TypeScript.vue'
44
import Basic from './components/Basic.vue'
55
import Coffee from './components/Coffee.vue'
6+
import Tsx from './components/Tsx.vue'
67

78
function mount(Component, props, slots) {
89
document.getElementsByTagName('html')[0].innerHTML = ''
@@ -34,3 +35,8 @@ test('processes .vue files with lang set to typescript', () => {
3435
expect(document.querySelector('#parent').textContent).toBe('Parent')
3536
expect(document.querySelector('#child').textContent).toBe('Child')
3637
})
38+
39+
test('processes .vue files with lang set to tsx(typescript)', () => {
40+
mount(Tsx)
41+
expect(document.querySelector('div').textContent).toContain('tsx components')
42+
})

Diff for: packages/vue3-jest/lib/process.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const vueComponentNamespace = require('./constants').vueComponentNamespace
1919
function resolveTransformer(lang = 'js', vueJestConfig) {
2020
const transformer = getCustomTransformer(vueJestConfig['transform'], lang)
2121
if (/^typescript$|tsx?$/.test(lang)) {
22-
return transformer || typescriptTransformer
22+
return transformer || typescriptTransformer(lang)
2323
} else if (/^coffee$|coffeescript$/.test(lang)) {
2424
return transformer || coffeescriptTransformer
2525
} else {

Diff for: packages/vue3-jest/lib/transformers/typescript.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const {
77
getVueJestConfig
88
} = require('../utils')
99

10-
module.exports = {
10+
module.exports = scriptLang => ({
1111
process(scriptContent, filePath, config) {
1212
ensureRequire('typescript', ['typescript'])
1313
const typescript = require('typescript')
@@ -16,7 +16,7 @@ module.exports = {
1616

1717
const res = typescript.transpileModule(scriptContent, {
1818
...tsconfig,
19-
fileName: filePath
19+
fileName: filePath + (scriptLang === 'tsx' ? '.tsx' : '')
2020
})
2121

2222
res.outputText = stripInlineSourceMap(res.outputText)
@@ -31,4 +31,4 @@ module.exports = {
3131

3232
return transformer.process(res.outputText, filePath, config)
3333
}
34-
}
34+
})

0 commit comments

Comments
 (0)