如何使用 Jest 测试 JSX Vue3 组件

问题描述

如何在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)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）