Jest с vuejs import es6 завершается ошибкой SyntaxError: Неожиданный токен

Question

Использую jest и получаю ошибки при импорте компонента

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

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

});

Но сейчас получаю ошибку SyntaxError: Неожиданный токен <при импорте ContactForm </p>

что мне нужно добавитьчтобы импорт работал

Это то, что есть в моей контактной форме

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

Answer 1

Это не работает, как это из коробки.Обычно у вас есть Webpack и vue-загрузчик для обработки отдельных файловых компонентов (.vue).Они выполняют работу по разделению шаблона, сценария и шаблона.Если вы запускаете jest, веб-пакет не задействуется, поэтому вам придется немного поработать над настройкой и подготовить свой код для jest.

Существует руководство, описывающее процесс: https://hackernoon.com/jest-for-all-episode-1-vue-js-d616bccbe186

Взгляните на эту часть:

Чтобы сделать эту работу, нам нужно дать Jest предварительную обработку файла> вернуть объект JS, который будет работать и для нас, и для Vue.