带有vuejs import es6的开玩笑失败SyntaxError:意外令牌< [英] Jest with vuejs import es6 fails SyntaxError: Unexpected token <

问题描述

我正在使用玩笑，并且在导入组件时遇到错误

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", () => {

});

但是现在出现错误SyntaxError:意外令牌<在导入ContactForm上

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>

推荐答案

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

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.

有一个描述该过程的教程: https://hackernoon.com/jest-for-all- Episode-1-vue-js-d616bccbe186

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

看看那部分:

要做到这一点，我们需要做的就是指示Jest预处理文件>返回一个对我们和Vue都适用的JS对象.

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.

这篇关于带有vuejs import es6的开玩笑失败SyntaxError:意外令牌&lt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！