Vue单元测试

jiezi

5 年前

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

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

意义： 可以减少 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);
      })
    })

关于单元测试