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>

Answer 1

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.