While conducting tests on a Vue single file component, Jest came across an unforeseen token

Question

While conducting tests on a Vue single file component, Jest came across an unforeseen token

I need help with setting up unit tests for my Vue application that uses single file components. I've been trying to use Jest as mentioned in this guide, but encountered an error "Jest encountered an unexpected token" along with the details below:

/some_path/MyRecipe.vue:1
<template>
^

SyntaxError: Unexpected token <

  1 | import { shallowMount } from "@vue/test-utils"
> 2 | import MyRecipe from "../src/components/MyRecipe.vue"
    | ^
  3 | 
  4 | describe('MyRecipe', () => {
  5 |   test('is a Vue instance', () => {

  at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
  at Object.<anonymous> (__tests__/MyRecipe.test.js:2:1)

After researching, such as from here, it appears that Jest might be expecting a .js file while the .vue single file components contain HTML, JavaScript, and CSS which are typically handled by webpack and vue-loader. Despite following various tutorials to configure Jest to transform .vue files using vue-jest, the error persists. Here is a snippet of my package.json file (unnecessary parts removed):

{
  "name": "all-recipes ",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    // ...
    "test": "jest"
  },
  "dependencies": {
    // ...
    "core-js": "^3.4.3",
    "vue": "^2.6.10"
    // ...
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/test-utils": "^1.0.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^26.0.1",
    // ...
    "jest": "^26.0.1",
    "jest-serializer-vue": "^2.0.2",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "^2.6.10",
    "vue-test-utils": "^1.0.0-beta.11"
  },
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.,(vue)$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    },
    "snapshotSerializers": [
      "jest-serializer-vue"
    ]
  }
}

If you have any insights on what could be wrong or tips on troubleshooting this issue, please share.

EDIT: I've checked out this question and don't think the solution there applies to importing .vue files instead of .html files.

EDIT 2: It seems like Jest is not recognizing the transforms properly, as removing them from package.json doesn't make a difference.

EDIT 3: Jest does seem to be utilizing vue-jest for transformation correctly. When I uninstall vue-jest and run the test again, Jest complains about vue-jest being missing.

javascript vue.js jestjs

Answer 1

Answer №1

I was faced with an unexpected resolution to my issue.

The root cause of the problem turned out to be a simple mistake in my regular expression string for identifying .vue files, causing it to overlook MyRecipe.vue file. Consequently, vue-jest didn't carry out the transformation needed for jest to comprehend the file properly, resulting in confusion due to the initial line not being JavaScript related; <template>. The correct regexp is ^[^.]+.vue$, so I updated the transform section in my package.json file as follows:


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

Answer 2

I was faced with an unexpected resolution to my issue.

The root cause of the problem turned out to be a simple mistake in my regular expression string for identifying .vue files, causing it to overlook MyRecipe.vue file. Consequently, vue-jest didn't carry out the transformation needed for jest to comprehend the file properly, resulting in confusion due to the initial line not being JavaScript related; <template>. The correct regexp is ^[^.]+.vue$, so I updated the transform section in my package.json file as follows:


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

Answer 3

Answer №2

I encountered similar issues in the past and here is what I discovered:

The problem was due to a short notation in the template v-slot

template(v-slot:body)

Although it compiled, Jest threw an error

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

I found two ways to resolve this issue:

Editing my jest.config.js as shown below:

globals: {
  'vue-jest': {
    pug: {
      doctype: 'html',
    },
  },
},

Writing a full notation like this
```
template(v-slot:body="")
```

Answer 4

I encountered similar issues in the past and here is what I discovered:

The problem was due to a short notation in the template v-slot

template(v-slot:body)

Although it compiled, Jest threw an error

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

I found two ways to resolve this issue:

Editing my jest.config.js as shown below:

globals: {
  'vue-jest': {
    pug: {
      doctype: 'html',
    },
  },
},

Writing a full notation like this
```
template(v-slot:body="")
```

Answer 5

Answer №3

By making a simple adjustment to the transform property in my vue-jest setup as outlined in the official documentation, I was able to resolve the issue that had been plaguing me.

Instead of using

"^[^.]+.vue$": "vue-jest"

, consider using

"^.+\\.vue$": "vue-jest"

. A complete configuration example may include:

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

Answer 6

By making a simple adjustment to the transform property in my vue-jest setup as outlined in the official documentation, I was able to resolve the issue that had been plaguing me.

Instead of using

"^[^.]+.vue$": "vue-jest"

, consider using

"^.+\\.vue$": "vue-jest"

. A complete configuration example may include:

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

Answer 7

Answer №4

After encountering the same issues and trying numerous solutions without success, I finally found a workaround that worked for me:

First, ensure that your package.json file contains the necessary dev dependencies and Jest configurations:

 "devDependencies": {
     "babel-jest": "^23.6.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^6.2.2"
       },

  "jest": {
     "moduleFileExtensions": [
     "js",
     "jsx",
     "json",
     "vue"
    ],
  "transform": {
    "^.+\\.vue$": "vue-jest"
    },
 "moduleNameMapper": {
   "^@/(.*)$": "<rootDir>/src/$1"
  },
"snapshotSerializers": [
   "jest-serializer-vue"
 ],
"testMatch": [
   "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*. 
(js|jsx|ts|tsx)"
 ],
 "testURL": "http://localhost/"
 }

Next, make sure to review your babel.config.js file:

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

Finally, double-check your jest.config.js file :

  module.exports = {
   preset: '@vue/cli-plugin-unit-jest',
  };

Answer 8

After encountering the same issues and trying numerous solutions without success, I finally found a workaround that worked for me:

First, ensure that your package.json file contains the necessary dev dependencies and Jest configurations:

 "devDependencies": {
     "babel-jest": "^23.6.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-unit-jest": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-vue": "^6.2.2"
       },

  "jest": {
     "moduleFileExtensions": [
     "js",
     "jsx",
     "json",
     "vue"
    ],
  "transform": {
    "^.+\\.vue$": "vue-jest"
    },
 "moduleNameMapper": {
   "^@/(.*)$": "<rootDir>/src/$1"
  },
"snapshotSerializers": [
   "jest-serializer-vue"
 ],
"testMatch": [
   "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*. 
(js|jsx|ts|tsx)"
 ],
 "testURL": "http://localhost/"
 }

Next, make sure to review your babel.config.js file:

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

Finally, double-check your jest.config.js file :

  module.exports = {
   preset: '@vue/cli-plugin-unit-jest',
  };

Answer 9

Answer №5

To successfully set up vue-jest (https://github.com/vuejs/vue-jest), you will need to execute the following command:

npm install -D @vue/vue3-jest

Refer to the table below for the compatible versions of vue and jest along with their respective packages.

Vue version	Jest Version	Package
Vue 2	Jest <= 26	vue-jest@4
Vue 3	Jest <= 26	vue-jest@5
Vue 2	Jest 27	@vue/vue2-jest
Vue 3	Jest 27	@vue/vue3-jest

After installation, remember to update your jest configuration (e.g., in jest.config.ts) by including a transform section.

"transform": {
    "^.+\\.vue$": "@vue/vue3-jest"
}

Note: Make sure to align your npm install and jest.config.ts settings with the suitable vue-jest package!

Answer 10

To successfully set up vue-jest (https://github.com/vuejs/vue-jest), you will need to execute the following command:

npm install -D @vue/vue3-jest

Refer to the table below for the compatible versions of vue and jest along with their respective packages.

Vue version	Jest Version	Package
Vue 2	Jest <= 26	vue-jest@4
Vue 3	Jest <= 26	vue-jest@5
Vue 2	Jest 27	@vue/vue2-jest
Vue 3	Jest 27	@vue/vue3-jest

After installation, remember to update your jest configuration (e.g., in jest.config.ts) by including a transform section.

"transform": {
    "^.+\\.vue$": "@vue/vue3-jest"
}

Note: Make sure to align your npm install and jest.config.ts settings with the suitable vue-jest package!

While conducting tests on a Vue single file component, Jest came across an unforeseen token

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can I get the class name of the drop destination with react-dnd?

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Explore the flexibility of npm by installing and utilizing various versions of a specific package

Expanding the size of an array list item in React

Display only the relevant data in a v-for loop

Setting up HMR for a Vue.js app can be a bit tricky, especially when trying to run it locally

Incorporate JavaScript code into an Angular UI-Router view

React-Troubleshooting list items and keys: A comprehensive guide to resolving common issues

Utilize route parameters in the nested subRoutes object in Vue.js to easily access data specific to

Transforming jQuery into Angular - Press Button to update choices in Dropdown List

when the submit button is clicked, verify whether the input field is empty

The Joomla jCE popup feature is not functioning properly when used with AJAX content

431 - (Excessive Request Header Size)

Is there a way to identify when a Tween.js animation has completed?

Preventing Vue.js SPA from accessing cached version when JWT expires: the solution

Why does my event dispatch only run once upon form submission in Svelte JS?

Is it necessary for me to be concerned with clearing out sizable objects in Node.js, or should I trust the garbage collector to handle

Encountering error code 2064 without any clear explanation in sight

Is there a way to prevent my token from being exposed when making an AJAX call?

Clicking on the initial link will in turn prompt clicks on the subsequent links