Jest with vuejs import es6 fails SyntaxError: Unexpected token <

Question

Am using jest and am getting errors when importing a component

import ContactForm from "../components/Contact/ContactForm.vue";
import { mount } from '@vue/test-utils'

describe("Contact Form", () => {

});

But now am getting an error SyntaxError: Unexpected token < at the import ContactForm

what do i need to add to have imports work

This is what is in my contact form

<template>
    my form is here
</template>
<script>
    export default{
        data:()=>({
            contact_form:{
                first_name:'',
                last_name:'',
                email:'',
                message:'',
            }
        }),
        methods:{
            ContactUs(){
               //stuff
            }
        }
    }
</script>

Perhaps that's not the actual code at fault..? (What is in ContactForm.vue?) — user2864740
Put another way: import normally reads JavaScript. Perhaps 'ContactForm.vue' does not contain valid JavaScript, and is resulting in this SyntaxError? — user2864740
i have added the contact form, How can i then import my vue component in my test file to test the component — Geoff
That's not valid JS :} Maybe there is a "special" way to load Vue modules? Also, </template is not correctly closed. — user2864740

Reynicke Reynicke · Accepted Answer · 2018-10-04T06:46:18

It does not work like this out of the box. Usually you have Webpack and the vue-loader to process single file component files (.vue). They do the work of splitting template, script and template. If you run jest, there is no Webpack involved so you do have to do a bit of configuration work and prepare your code for jest.

There is a tutorial describing the process: https://hackernoon.com/jest-for-all-episode-1-vue-js-d616bccbe186

Take a look at that part:

What we need to do to make this work, is instruct Jest to preprocess the file > to return a JS object that will work for both us and Vue.

Jest with vuejs import es6 fails SyntaxError: Unexpected token <

1 Answers