vue 和 jest 的“当前未启用对实验语法 'jsx' 的支持”

Question

我是前端开发和 Vue 的新手，在尝试使用 Jest 和 Vue-testing-library 向我的 Vue 应用程序添加“组件测试”时遇到以下错误。

FAIL tests/component-tests/vue-router.test.js
  ● Test suite failed to run

    SyntaxError: C:\app\src\components\MyComponent.vue: Support for the experimental syntax 'jsx' isn't currently enabled (1:1):

    > 1 | <template>
        | ^
      2 |       <div class="hello">
      3 |               ...
      4 |               ...

    Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

      at Parser._raise (node_modules/@babel/core/node_modules/@babel/parser/src/parser/error.js:60:45)
      at Parser.raiseWithData (node_modules/@babel/core/node_modules/@babel/parser/src/parser/error.js:55:17)
      at Parser.expectOnePlugin (node_modules/@babel/core/node_modules/@babel/parser/src/parser/util.js:157:18)
      at Parser.parseExprAtom (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:1189:18)
      at Parser.parseExprSubscripts (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:563:23)
      at Parser.parseUpdate (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:543:21)
      at Parser.parseMaybeUnary (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:527:17)
      at Parser.parseExprOps (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:343:23)
      at Parser.parseMaybeConditional (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:308:23)
      at Parser.parseMaybeAssign (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:263:21)

我有另一个单元测试，它只是检查 .js 文件中的一个函数，它通过了。 谷歌搜索并最终得到以下配置

package.json

{
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest --config=./jest.config.js --coverage"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuetify": "^2.2.11",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "@testing-library/vue": "^5.1.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.4",
    "@vue/cli-service": "~4.5.0",
    "axios": "^0.18.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "jest": "^26.4.2",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-axios": "0.0.4",
    "vue-cli-plugin-vuetify": "~2.0.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

jest.config.js

module.exports = {
    moduleNameMapper: { "^@/(.*)$": "<rootDir>/src/$1" },
}

babel.config.js

module.exports = {
  presets: [
    '@vue/babel-preset-jsx',
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: ["@babel/plugin-syntax-jsx"]
}

vue.config.js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  pages: {
    index: {
      entry: 'src/main.js',
      title: 'My App'
    }
  }
}

tests/component-tests/vue-router.test.js

import router from '../../src/router/index.js';
import {render, fireEvent} from '@testing-library/vue'

import App from '../../src/App.vue'

test('full app rendering/navigating', async () => {
    const {queryByTestId} = render(App, router.routes)
    ...
})
  

Answer 1

确保安装所有这些依赖项，并进行以下配置。

安装 vue-template-compiler 和 vue-jest

yarn add vue-template-compiler vue-jest
# OR
npm install vue-template-compiler vue-jest

安装 vue-test-utils

yarn add @vue/test-utils
# OR
npm install @vue/test-utils

在 jest.config.js 中，你会告诉 jest 每个 (.vue) 文件都应该通过 vue-jest 运行。

moduleFileExtensions: ['js', 'vue'],

...

transform: {
  "^.+\\.js$": "babel-jest",
  "^.+\\.vue$": "vue-jest",
},

如果我以某种方式（或没有）帮助了你，请与我们分享。

Answer 2

我在 Vue 项目上开个玩笑，这是我的配置：

在我的 jest.config.js 我有这个

...
moduleFileExtensions: [
    "js",
    "json",
    // tell Jest to handle `*.vue` files
    "vue",
],
transform: {
    // process `*.vue` files with `vue-jest` this is the most important thing to transform your VUE code!
    "^.+\\.vue$": "vue-jest",
    "^.+\\.js$": "babel-jest",
},
moduleNameMapper: {
    "^src(.*)$": "<rootDir>/src$1",
    "^lodash-es$": "lodash",
}

所以该错误与在 vue 中使用 jsx 无关，因为您使用的是单文件组件编码样式，问题是您没有转换 .vue 文件，因此您需要在 jest 配置中添加“转换” .

我的 babel 配置：

module.exports = {
   presets: [
      "@babel/preset-env"
   ],
   plugins: []
}

还有我的 JSON 包：

...
"babel-jest": "26.6.3",
"@babel/preset-env": "7.12.13",
"vue-jest": "3.0.7",
...

让我知道这个配置是否适合你！ 如果你创建一个 repo 会更好，这样我们就可以调整你的配置！