How test JSX Vue3 component with Jest

I have: button.vue

<script lang="tsx">
export default defineComponent({
   render() {
    return <button>...</buttton>
  }
})
</script>

<style lang="scss">...</style>

jest.config.js

module.exports = {
   ...
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.css?$': 'jest-transform-css',
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/scripts/svg-transform.js',
  }
}

when I run button.spec.ts error 48 | render: function () { 49 | var _a = this.buttonStyleComputed, ButtonTag = _a.buttonTag, buttonSvg = _a.buttonSvg, buttonPrimary = _a.buttonPrimary, buttonDisabled = _a.buttonDisabled, buttonBgImage = _a.buttonBgImage;

50 | var ButtonIcon = buttonSvg.content ? content : , buttonSvg = (void 0).buttonSvg; | ^ 51 | }, 52 | : .content 53 | }, style = { buttonSvg: buttonSvg, : .style } / > , null);

  at Object._raise (node_modules/@babel/parser/src/parser/error.js:134:45)
  at Object.raiseWithData (node_modules/@babel/parser/src/parser/error.js:129:17)
  at Object.raise (node_modules/@babel/parser/src/parser/error.js:78:17)
  at Object.unexpected (node_modules/@babel/parser/src/parser/util.js:181:16)
  at Object.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1203:20)
  at Object.parseExprAtom (node_modules/@babel/parser/src/plugins/jsx/index.js:567:22)
  at Object.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:600:23)
  at Object.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:580:21)
  at Object.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:547:23)
  at Object.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:358:23)

I don't think you need tsx in the lang - just ts.

See here for example Jest and Babel configs:

Do you have the JSX babel plugin for Vue? This one: https://github.com/vuejs/vue-test-utils-next/blob/94e1f287ba944c6c766a918d7611f5a4c42e0c0d/package.json#L25

I cannot debug this without a repository and all your dependencies. Either way, this looks like a config problem, not an actual bug, so I'm closing this. I can help you debug if you provide a repository, but it's probably faster for you to just look at Vue Test Utils which has TSX working and use that as a guide.

vuejs / vue-jest

How test JSX Vue3 component with Jest #370