vue和jest

问题描述

我是前端开发和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'
    }
  }
}

测试/组件测试/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)
    ...
})
  

解决方法

我在我的 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",...

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

,

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

安装 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",

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