CODEWITHSUNDEEP
unit-testingvuejs2jestjsbabel-jest
Caleb Nasio
Caleb Nasio

Reputation: 61

"Unexpected token <" Using 'npm test' with vue-dropdowns and Vue + jest

I keep getting an error message from jest "SyntaxError: Unexpected token <"

Jest test error

Here is my test in the spec.js file.

import { shallowMount, createLocalVue } from '@vue/test-utils'
import promotionsForm from '@/components/promotions/PromotionsForm.vue'
import router from '@/router';

const localVue = createLocalVue();

jest.mock('@/store')
jest.mock('@/helpers', () => {
   return {
       startDate: jest.fn().mockReturnValue(
         new Date(Date.now())
       ),
       Helper: {
         getCountryCurrencyCode () {
           return 'USD'
         }
       }
   }
})


describe('promotionsForm.vue', () => {
  it('Past dates should be disabled', () => {
      const wrapper = shallowMount(promotionsForm, {localVue, router})
      expect(wrapper.find('.date-inline-picker:first-child input').exists()).toBe(true)
  })
})

Here is my jest.config.js setup

 module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue', 'html'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.js$': 'babel-jest',
    '^.+\\.html?$': 'html-loader-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  testMatch: ['**/test/unit/**/*.spec.js'],
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]
 }

What am I missing or doing wrong?

Upvotes: 1

Views: 181

Answers (1)

Daniel
Daniel

Reputation: 35704

The problem, it seems to me, is that babel is not setup to transform your vue files.

Without seeing the setup It's hard to make specific suggestions, but I would recommend you go though the docs here: https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-jest.html

Upvotes: 1

Related Questions