Question

我正在尝试使用Vue.js创建一个组件。我的组件目前定义如下：

MyComponent.vue

<template id="my-template">
    <div>
        <button class="btn" v-on:click="increment">increment</button>
    </div>
</template>

<script type="text/javascript">
    Vue.component('incrementer', {
        template: '#my-template',
        props: {
            i: {
                type: Number,
                default: 1,
            }
        },

        data: function() {
            return {
                count: 0
            }
        },

        methods: {
            increment: function() {
              this.count = this.count + this.i;
            }
        }
    });
</script>

我正在尝试为此组件创建一些自动化测试。为了做到这一点，我有以下内容：

我-component.spec.js

const MyComponent = require('../src/MyComponent.vue');

describe('my-component', function() {
    // Inspect the raw component options
    it('has a created hook', () => {
        expect(typeof MyComponent .created).toBe('function')
    });
});

我正试图通过Gulp通过Jasmine运行此测试。在Gulp中，我的测试任务如下：

gulpfile.js

gulp.task('test', ['build'], function() {
    return gulp.src(['test/**/*spec.js'])
        .pipe(jasmine({
            timeout: 10000,
            includeStackTrace: false,
            color: false
         }))
    ;
});

执行此任务时，收到以下错误：

(function (exports, require, module, __filename, __dirname) { <template id="my-template">
                                                              ^
SyntaxError: Unexpected token <

我不明白为什么我收到这个错误。我需要做什么才能通过Jasmine在Vue.js中测试组件？

谢谢！

Answer 1

根据Vue Docs：

就测试的代码结构而言，您无需在组件中执行任何特殊操作即可使其可测试。只需导出原始选项

当您测试该组件时，您所要做的就是将对象与Vue一起导入以进行许多常见断言

所以 MyComponent.vue 文件：

<template>
<div>
    <button class="btn" v-on:click="increment">increment</button>
</div>
</template>

<script type="text/javascript">
export default {
    props: {
        i: {
            type: Number,
            default: 1,
        }
    },

    data: function() {
        return {
            count: 0
        }
    },

    methods: {
        increment: function() {
          this.count = this.count + this.i;
        }
    }
}
</script>

然后在 my-component.spec.js ：

中

const Vue = reuqire("vue")
const MyComponent = require('../src/MyComponent.vue');

describe('my-component', function() {
    // Inspect the raw component options
    it('has a created hook', () => {
        expect(typeof MyComponent.created).toBe('function')
    });
});

Vue.js - “SyntaxError：意外的令牌＆lt;”测试组件时

1 个答案: