"Support for the experimental syntax 'jsx' isn't currently enabled" with vue and jest

Question

I am new to front-end development and Vue and came across the following error while trying to add "component test" to my Vue application using Jest and Vue-testing-library.

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)

I have another unit-test, which simply checks a function in a .js file, which passes. Googled around and ended up with following configuration

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

I have jest working on my Vue project and here is my config:

In my jest.config.js I have this

...
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",
}

So the error is not related to use jsx in vue because you are using a single file component coding style, the problem is that you are not transforming your .vue files so you need to add that "transform" in the jest config.

My babel config:

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

And my package JSON:

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

Let me know if this config works for you! And It will be better if you create a repo so we can play around and tweak your config!

Answer 2

Make sure that you install all this dependencies, and the follow configuration.

Install vue-template-compiler and vue-jest

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

Install vue-test-utils

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

In jest.config.js, you will tell to jest that every (.vue) file, should run through vue-jest.

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

...

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

If I helped you in some way (or not), please share with us.

Answer 3

This solved it for me. If you're using vue 3, adding @vue/vue3-jest fixes the issue:

"transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "@vue/vue3-jest",
    "^.+\\.(ts|tsx)$": "ts-jest"
 }