Vuejs + Jest : “SyntaxError: Unexpected token <”

[JawedHook]

I have a Vue file which imports a Vue file from node_modules. This file seems to not be recognize as a vue file when imported and doesn't use vue-jest.

I tried to use an htmlLoader, but doesn't work either.

Here is the error I get :

path/node_modules/vue-loading-spinner/src/components/Jumper.vue:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>                 
SyntaxError: Unexpected token <

Here is my jest.conf.js :

const path = require('path')

module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'vue',
    'html'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.vue$': '<rootDir>/node_modules/vue-jest',
    "^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
  },
  testPathIgnorePatterns: [
    "<rootDir>/node_modules/"
  ],
  modulePaths: [
    "<rootDir>"
  ],
  setupFiles: ['<rootDir>/test/unit/setup'],
  testMatch: [
    '<rootDir>/(test/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
  ]
}

And here is my test file ( I know there is no test in this file, but not necessary at the moment if I can mount my component ) :

import { shallowMount } from "@vue/test-utils"
import Card from '@/components/Card'
import { propsSet } from '../../datas/components/Card'
import Brace from 'vue-bulma-brace'

describe('FreeSql Unit Tests', () => {
    test('FreeSql : Display correct', () => {
        
        const wrapper = shallowMount(FreeSql, {
            propsData:{
                ...propsSet
            },
            stubs:{
                Brace
            }
        })
    })
})

Thanks for your help.

[LinusBorg]

Judging from the error message referring to a file in a node_modules package:

path/node_modules/vue-loading-spinner/src/components/Jumper.vue:1

We can see that your .vue file itself is recognized fine, but jest seems to not transform stuff from node_modules.

And that's indeed the default behaviour:

https://jestjs.io/docs/en/23.x/configuration#transformignorepatterns-array-string

Solution

Excempt this package from the transformIgnorePatterns option with a negatiuve lookahead:

{
  "transformIgnorePatterns": ["/node_modules/(?!vue-loading-spinner)"]
}

[JawedHook]

@LinusBorg That works perfectly, thank you for your help. :)

[manuel-84]

@LinusBorg sorry to bother in an old question, but I'm having same error and no working solutions found yet (in my case the module is v-snackbars, which have only 1 vue file)
I've already tried transformIgnorePatterns and updating to vue-jest@4 (i'm using jest 26.4.2), and also changing the vue transform regex.
If I copy the module vue file inside my project and include it from there everything works, but it's not really the way I want to go...

So right now if I use

import VSnackbars from 'v-snackbars'
I got

 ● Test suite failed to run

    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:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    .......\node_modules\v-snackbars\v-snackbars.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^

    SyntaxError: Unexpected token '<'

This is jest.config:

module.exports = {
  setupFiles: [
    '<rootDir>/tests/jest.setup.ts'
  ],
  setupFilesAfterEnv: ['<rootDir>/tests/vue.setup.ts'],
  modulePaths: [
    '<rootDir>/src',
    '<rootDir>/node_modules'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
    'vuetify/lib(.*)': '<rootDir>/node_modules/vuetify/es5$1',
    'echarts/(.*)': '<rootDir>/node_modules/echarts/dist/echarts.js',
    'vuetify/src/locale/(.*)': '<rootDir>/node_modules/vuetify/es5/locale/$1',
    '\\.(css|less|scss|sass|sss|styl)$': '<rootDir>/node_modules/jest-css-modules'
  },
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
    '.*\\.vue$': 'vue-jest'
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  silent: true,
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/layouts/**/*.vue',
    '<rootDir>/pages/**/*.vue',
    '<rootDir>/middleware/**/*.ts',
    '<rootDir>/plugins/**/*.ts',
    '<rootDir>/store/**/*.ts'
  ],
  transformIgnorePatterns: [
    '/node_modules/(?!(vuetify)/)',
    '/node_modules/(?!echarts)',
    '/node_modules/(?!typed-vuex)',
    '/node_modules/(?!(v-snackbars)/)'
  ],
  testMatch: ['<rootDir>/tests/**/*.spec.ts']
}

[LinusBorg]

Well, your case doesn't seem special, it should work with a matching transformIgnorePatternike described in m previous comment.

I don't see anything else to do or try.what pattern did you try?

[manuel-84]

Well, your case doesn't seem special, it should work with a matching transformIgnorePatternike described in m previous comment.

I don't see anything else to do or try.what pattern did you try?

for transform i tried ^.+\\.vue$ and ^(.*).vue$ and some variations
for transformIgnorePattern /node_modules/(?!(v-snackbars)/) and little variations (and also without it at all)

I don't know if it matters that i'm on windows machine
I'm also running the tests with "--no-cache" option for this case

[adityaswaroop823]

hiii @manuel-84 i am facing exactly same issue , Were you able to fix this

[manuel-84]

hiii @manuel-84 i am facing exactly same issue , Were you able to fix this

hi, no the only way was to not use the module and instead create a custom component 'v-snackbars' using the source from its own repo