用 vuejs import es6 开玩笑失败 SyntaxError: Unexpected token <答案

【问题标题】：Jest with vuejs import es6 fails SyntaxError: Unexpected token <用 vuejs import es6 开玩笑失败 SyntaxError: Unexpected token <
【发布时间】：2018-10-04 00:13:20
【问题描述】：

我在使用 jest 并且在导入组件时遇到错误

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

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

});

但现在出现错误 SyntaxError: Unexpected token

我需要添加什么才能使导入工作

这是我的联系表格中的内容

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

【问题讨论】：

也许这不是错误的实际代码..？（ContactForm.vue 中有什么内容？）
它是一个 vuejs 组件
换一种说法：import 通常读取 JavaScript。也许“ContactForm.vue”不包含有效的 JavaScript，并导致此 SyntaxError？
我已经添加了联系表单，然后如何在我的测试文件中导入我的 vue 组件来测试该组件
这不是有效的 JS :} 也许有一种“特殊”的方式来加载 Vue 模块？另外，</template 没有正确关闭。

标签： javascript jestjs

【解决方案1】：

它不能像这样开箱即用。通常你有 Webpack 和 vue-loader 来处理单个文件组件文件（.vue）。他们负责拆分模板、脚本和模板的工作。如果您运行 jest，则不涉及 Webpack，因此您必须做一些配置工作并为 jest 准备代码。

有一个教程描述了这个过程： https://hackernoon.com/jest-for-all-episode-1-vue-js-d616bccbe186

看看那部分：

要完成这项工作，我们需要做的是指示 Jest 预处理文件 > 以返回一个对我们和 Vue 都有效的 JS 对象。

【讨论】：