十月初 Vuejs官方团队发布了测试套件 vue-test-utils github 地址 / 官方网站 本文主要是参考官方的指南 和一个国外的视频教程 第二节

上节留下的问题

我们在开发 Vuejs 项目时，使用最多的是 单文件组件。也就是包含 template, script, style 的 .vue 文件。 这类文件依赖webpack和vue-loader。

安装 vue-loader

    npm i vue-loader -D

上节中 webapck.config.js 是一个空文件。现在添加内容

module.exports = {
    module: {
        rules: [{
            test: /\.vue$/,
            use: 'vue-loader'
        }]
    }
}

将 counter.spec.js 第二行的 import Counter from '../src/components/Counter'; 改为 import Counter from '../src/components/Counter.vue';

将 Counter.js 改写为 Counter.vue

<template>
    <div><button @click="count++">+</button><span class="count">8</span></div>
</template>
<script>
    export default {
        data() {
            return {
                count: 0
            }
        }
    }
</script>

运行 npm test ，顺利通过。

原教程地址

https://laracasts.com/series/testing-vue/episodes/2