vue 和 jest 的“当前尚未启用对实验性语法‘jsx’的支持”

Question

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

\n

FAIL tests/component-tests/vue-router.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    SyntaxError: C:\\app\\src\\components\\MyComponent.vue: Support for the experimental syntax \'jsx\' isn\'t currently enabled (1:1):\n\n    > 1 | <template>\n        | ^\n      2 |       <div class="hello">\n      3 |               ...\n      4 |               ...\n\n    Add @babel/preset-react (https://git.io/JfeDR) to the \'presets\' section of your Babel config to enable transformation.\n    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the \'plugins\' section to enable parsing.\n\n      at Parser._raise (node_modules/@babel/core/node_modules/@babel/parser/src/parser/error.js:60:45)\n      at Parser.raiseWithData (node_modules/@babel/core/node_modules/@babel/parser/src/parser/error.js:55:17)\n      at Parser.expectOnePlugin (node_modules/@babel/core/node_modules/@babel/parser/src/parser/util.js:157:18)\n      at Parser.parseExprAtom (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:1189:18)\n      at Parser.parseExprSubscripts (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:563:23)\n      at Parser.parseUpdate (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:543:21)\n      at Parser.parseMaybeUnary (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:527:17)\n      at Parser.parseExprOps (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:343:23)\n      at Parser.parseMaybeConditional (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:308:23)\n      at Parser.parseMaybeAssign (node_modules/@babel/core/node_modules/@babel/parser/src/parser/expression.js:263:21)\n

\n

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

\n

包.json

\n

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

\n

笑话配置.js

\n

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

\n

babel.config.js

\n

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

\n

vue.config.js

\n

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

\n

测试/组件测试/vue-router.test.js

\n

import router from \'../../src/router/index.js\';\nimport {render, fireEvent} from \'@testing-library/vue\'\n\nimport App from \'../../src/App.vue\'\n\ntest(\'full app rendering/navigating\', async () => {\n    const {queryByTestId} = render(App, router.routes)\n    ...\n})\n  \n

\n

Answer 1

我在我的 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 配置中添加“转换”。

我的巴贝尔配置：

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

我的包 JSON：

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

让我知道这个配置是否适合您！如果您创建一个存储库，这样我们就可以尝试并调整您的配置，那就更好了！