Vue学习(5)使用单元测试

在组件开发的过程中，我们常使用单元测试来保证组件不会出问题，因此掌握必要的单元检测知识也很必要，在前面的构建Ant Design项目时，我们就选用了Jest来进行单元测试，下面就展示单元测试的一个小例子。

首先，我们写一个计数器----Counter.vue,点击"加1”按钮实现数字加1

<template>
    <div>
        count:{
  {count}}
        <button @click="handleClick">加1</button>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return{
                count:0
            }
        },
        methods:{
            handleClick(){
                this.count++;
            }
        }
    }
</script>

<style scoped>

</style>

然后在util/test下新建测试文件，名字必须为xxx.spec.js，我为了和组件名字统一，就取了Counter.spec.js,首先通过vue-test-utils提供的mount方法来挂载组件和我们要测试的Counter组件,如下

import { mount } from "@vue/test-utils";