如何使用 Jest 测试 JSX Vue3 组件

Question

如何在Vue文件中使用render和JSX编写通过Jest测试？ 可以帮忙看看吗？

Vue 文件使用 typescript & render: button.vue（代码）

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

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

jest config -> 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',
  }
}

babel.config.js（代码）

module.exports = {
  presets: [['@babel/preset-env', { targets: { node: true } }], '@vue/babel-preset-jsx'],
  plugins: [
    ['@vue/babel-plugin-jsx', { mergeProps: false, enableObjectSlots: false }],
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
  ],
};

项目包 v -> package.json

{
  "devDependencies": {
    "@babel/preset-env": "^7.14.2",
    "@testing-library/jest-dom": "^5.12.0",
    "@types/jest": "^26.0.23",
    "@vitejs/plugin-vue": "^1.2.5",
    "@vitejs/plugin-vue-jsx": "^1.1.6",
    "@vue/babel-plugin-jsx": "^1.0.6",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/compiler-sfc": "^3.1.5",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-rc.6",
    "@vuedx/typescript-plugin-vue": "^0.6.3",,
    "axios": "^0.21.1",
    "babel-jest": "^26.6.3",
    "colors-console": "^1.0.3",
    "connect-timeout": "^1.9.0",
    "conventional-changelog-cli": "^2.1.1",
    "conventional-changelog-custom-config": "^0.3.1",
    "cz-conventional-changelog": "^3.3.0",
    "docsify-cli": "^4.4.3",
    "eslint": "^7.26.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-define-config": "^1.0.8",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.9.0",
    "express": "^4.17.1",
    "glob": "^7.1.7",
    "husky": "^6.0.0",
    "inquirer": "^8.1.0",
    "jest": "^26.6.3",
    "jest-transform-css": "^2.1.0",
    "lerna": "^4.0.0",
    "mockjs": "^1.1.0",
    "nanoid": "^3.1.23",
    "nodemon": "^2.0.7",
    "postcss": "^8.2.15",
    "prettier": "^2.3.0",
    "prompt": "^1.1.0",
    "rimraf": "^3.0.2",
    "sass": "^1.34.1",
    "shelljs": "^0.8.4",
    "tailwindcss": "^2.1.2",
    "ts-jest": "^26.5.6",
    "ts-node": "^9.1.1",
    "type-fest": "^1.2.2",
    "typescript": "^4.1.3",
    "vite": "^2.4.3",
    "vite-plugin-svg-icons": "^0.7.0",
    "vue-eslint-parser": "^7.6.0",
    "vue-jest": "^5.0.0-alpha.9",
    "vue-tsc": "^0.2.2",
    "yarn": "^1.22.10"
  },
  "dependencies": {
    "@vueuse/core": "^4.11.2"
  }
}

当我运行button.spec.ts错误时，如何用jest测试Vue3组件中的jsx

      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)