Search code examples
vue.jsjestjsnuxt.jsvue-test-utils

Nuxt/Jest - Syntax Error: Unexpected token {


I have installed the Vue Test tools, installed Jest and have a test case just to verify that the vue instance works.

My test looks like the following

/* global describe, test, expect */
/* eslint no-undef: "error" */
import { mount } from '@vue/test-utils';
import Logo from '@/components/Logo';

describe('Logo', ()=> {
test('is a vue instance', () => {
const wrapper = mount(Logo)
expect(wrapper.vm).toBeTruthy()
});
});

I run it using npm run test and get the following error

import { mount } from '@vue/test-utils'
Syntax error: Unexpected token {

(with an carrot pointing to the { in front of { mount }

Any ideas?

***** Editing to add my jest.config.js ****

module.exports = {
  moduleNameMapper: {
   '^@/(.*)$': '<rootDir>/$1',
   '^~/(.*)$': '<rootDir>/$1',
   '^vue$': 'vue/dist/vue.common.js'
 }, 
 moduleFileExtentions: ['js', 'vue', 'json'],
 testPathIgnorePatterns: ['/dist/', '/node_modules/'], 
 transform: {
   '^.+\\.js$' : 'babel-jest',
   '.*\\.(vue)$' : 'vue-jest'
 }, 
collectCoverage: true, 
collectCoverageFrom: [
  '<rootDir>/components/**/*.vue', 
   '<rootDir>/pages/**/*.vue'
 ]
}

Solution

  • I figured out the issue. I needed to add '@babel/preset-env' to my presets in my babel.config

    I'm now getting errors related to Vuetify but for this issue that fixed the problem. Ill create a new question for the other issue.