"실험 구문 'jsx'에 대한 지원이 현재 활성화되지 않았습니다." vue 및 jest를 사용합니다.

"실험 구문 'jsx'에 대한 지원이 현재 활성화되지 않았습니다." 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 파일의 함수를 체크하는 것만으로 합격입니다.검색한 결과 다음과 같은 구성이 되었습니다.

패키지.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.displays

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

babel.config.syslog

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

vue.config.module

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

tests/component-private/vue-private.test.display

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 프로젝트에서 농담할 일이 있습니다.설정은 다음과 같습니다.

joke.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 Configuration에 "변환"을 추가해야 한다는 것입니다.

내 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)를 작성해서 재생하고 설정을 변경할 수 있도록 하는 것이 좋습니다.

이러한 의존관계와 다음의 설정을 모두 인스톨 해 주세요.

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

jeast.config.js에서는 모든 (.vue) 파일이 vue-jest를 통해 실행되어야 한다고 말합니다.

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

...

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

제가 어떤 식으로든 도와드렸다면 공유해 주세요.

언급URL : https://stackoverflow.com/questions/64476425/support-for-the-experimental-syntax-jsx-isnt-currently-enabled-with-vue-and