Vue单元测试

单元测试，就是为了测试某一个类或者是某一个方法可否正常工做而写的测试代码。

关于单元测试

是什么： 单元测试是针对 程序的最小单元 来进行正确性检验的测试工做。就是测试某一个页面或者是某一个方法来进行测试的代码单元。

意义： 能够减小bug，提升代码的效率质量，同时能够快速定位bug存在的地点位置，减小调试时间，放心重构代码。

目的： 当咱们的项目足够大的时候，在重叠的模块和组件的过程当中，可能会有影响到以前的模板。

测试命令：npm run unit

测试的文件内容(List.vue)：

<template>
      <div>
        <h1>My To Do List</h1>
        <br/>
        <ul>
          <!-- 红线警告是这个编辑器不支持这种格式的写法 -->
          <li v-for="item in listItems">{{ item }}</li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      name: "list",
      data() {
        return {
          listItems: ["buy food", "play games", "sleep"]
        };
      }
     };
    </script>

测试的路由配置(index.js)：

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import List from '@/components/List'
    
    Vue.use(Router)
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/to-do',
          name: 'ToDo',
          components: List
        },
      ]
    });

配置的测试文件内容(List.spc.js)：

import Vue from 'vue';
    import List from '@/components/List';
    
    describe('List.vue', () => {
      it('displays items from the list', () => {
        // 获取mount中的组件实例
        const Constructor = Vue.extend(List);
        const ListComponent = new Constructor().$mount();
        // 测试是否错误代码
        // expect(vmComponent.count).toBe(2);
      })
    })