精华内容
下载资源
问答
  • Vue单元测试

    2021-01-21 17:01:24
    Vue单元测试前言前端测试Vue中的测试KarmaMocha断言库 前言 为什么需要测试 测试是完善的研发体系中不可或缺的一环。前端同样需要测试,你的CSS改动可能导致页面错位、JS改动可能导致功能不正常。尽管测试领域工具...

    前言

    • 为什么需要测试
      测试是完善的研发体系中不可或缺的一环。前端同样需要测试,你的CSS改动可能导致页面错位、JS改动可能导致功能不正常。尽管测试领域工具层出不穷,在前端的自动化测试上却实施并不广泛,但是前端偏向界面所以还是有很多人依旧以手工测试为主。
      流程

    前端测试

    虽然很多公司有自己的测试部门,而且前端开发大多不涉及测试环境,但鉴于目前前端领域的快速发展,其涉及面越来越广,前端开发者们必然不能止步于目前的状态。我认为学好前端测试,不仅仅有利于自己整理需求、检查代码,更是一个优秀开发者的体现。

    Vue中的测试

    我们这里采用的是Vue官方工具(Vue-Cli)搭建出来的项目,在这个搭建工具中推荐的两种测试分别是端到端的测试(E2E)和单元测试(Unit Test)

    • 端到端测试(E2E)
      从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。
    • 单元测试(Unit Test)
      测试驱动开发(TDD:Test-Driven Development)
      用来对一个模块,一个函数或者一个类来进行正确性检验的测试工作。
      在Vue中的单元测试主要使用的两个工具分别是Karma和Mocha

    Karma

    Karma是基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具的主要作用是将项目运行在各种主流web浏览器进行测试。
    换句话说,他是一个测试工具,能让你的代码在浏览器环境下测试。需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来;另外,浏览器有兼容问题,karma提供了手段让你的代码自动在多个浏览器环境下运行。

    Mocha

    Mocha是一个测试框架,在Vue-cli中配合Mocha本身不带断言库,所以必须先引入断言库,Chai断言库实现单元测试。
    Mocha的常用命令和用法不算太多,而Chai断言库可以看Chai.js断言库API中文文档,很简单,多查多用就能很快掌握。

    断言库

    所谓“断言”,就是判断源码的实际执行结果与预期结果是否一致,如果不一致就抛出一个错误。
    下面断言的意思是,调用add(1,1),结果应该等于2。

    var expect = require('chai').expect;
    expect(1+1).to.be.equal(2);
    

    Chai是一种断言库(http://chaijs.com/)。
    所有的测试用例(it块)都应该含有一句或多句断言。它是编写测试用例的关键。断言功能由断言库来实现。

    Chai的基本使用

    expect(4+5).to.be.equal(9); // 判断4+5等于9 true
    expect(4+5).to.be.not.equal(10); // 判断4+5不等于10 true
    expect({ bar: 'baz' }).to.be.deep.equal({ bar: 'baz' }); //深度判断是否相等
    
    expect(true).to.be.ok; // 判断是true
    expect(false).to.not.be.ok; // 判断是false
    
    // 判断类型
    expect('test').to.be.a('string');
    expect({ foo: 'bar' }).to.be.an('object');
    
    // 判断是否包含
    expect([1,2,3]).to.include(2);
    

    Vue中使用测试步骤

    1. 在Node环境下安装Vue-Cli
    npm install -g vue-cli
    
    1. 通过Vue-Cli初始化项目文件,命令如下
    vue init webpack testtodo
    
    1. 可以运行初始化的测试
    npm run init
    

    Vue脚手架已经初始化了一个HelloWorld.spec.js的测试文件去测试HelloWorld.vue,你可以在test/unit/specs/HelloWorld.spec.js下找到这个测试文件。(提示:将来所有的测试文件,都将放specs这个目录下,并以测试脚本名.spec.js结尾命名)

    1. 安装Vue.js官方的单元测试实用工具库(方便在node环境下操作Vue)
    npm install --save=dev @vue/test-utils@1.0.0-beta.12
    
    1. 做一个TodoMVC完成查看、增加、删除、修改功能
      每完成一个功能,就做一个测试
    展开全文
  • VUE 单元测试

    2017-06-22 10:49:13
    VUE手动单元测试

    官网上推荐的是karma和jasmine,这里我写的是我们自己的手动单元测试.
    我们都知道,一个项目在完成之后会进入后期的更新迭代和维护.而单元测试虽然在前期写起来会相对麻烦,但是在后期的维护过程中会简单很多,可以明显的看出是后台端口的问题还是前端自己的问题.
    我们现在工程目录里建立一个测试的文件夹
    这里写图片描述
    这里我们建立的是apitest测试文件夹,而用户中心的测试每个人一个模块是放在UCenter下的
    这里写图片描述
    这里我简单的举个例子,org是组织机构的单元测试,我们在ucenter文件夹下面建立一个org.vue.我们之前曾在api的文件夹下面根据不同的模块封装了api接口,这里我们需要直接调用方法.
    我们需要在页面上跑起来,所以需要创造一个组件
    这里写图片描述
    这里我们为了简单化,所以每个p标签里面的内容是要测试的接口和测试这个接口成功之后返回的值.我们还需要把我们要测试的api引进来
    这里写图片描述
    引入api之后,重点就是如何让我们的测试运行跑起来,我们现在data里面声明我们绑定的数据,初始状态为false
    这里写图片描述
    接下来我们就要在methods里面写测试的方法.
    这里写图片描述
    在这里我们写请求接口方法的时候,封装里面的方法我们返回的是所有的数据(response),所以
    orgAdd.post(orgAdd.inputValue).then(function (rep) {
    if(rep.data.code == 200){
    this.testOrgAddParam = true;
    }
    }.bind(this));

    then后面的req也是全部返回的数据.如果返回数据码是200的话,我们之前定义的testOrgAddParam就为true.后面的bind(this)必须写,代表指向,如果不写的话容易出现问题,当然大家也可以尝试试验一下,我这也只是按照我们的经验而谈的.最后我们需要让这个方法执行起来才能看到是否有问题.所以需要在created里面让他们在页面加载前运行起来.
    这里写图片描述
    你需要把你写的这个文件写在主页面和路径当中,让它可以在页面展示出来,展示的效果如下
    这里写图片描述
    这样效果就会直观很多.

    这是就其中一个方法和接口的测试.当然如果你负责的模块有很多端口的话,你需要把所有的测试写在这一个文件当中,简单清晰.方便后期的维护.

    展开全文
  • vue单元测试

    2020-05-04 17:43:02
    基于老版没有用typescript的vue-cli做单元测试, 配置如下 需要下载测试最好不要带vue-router “chai”: “^4.1.2”, karma与mocha “@vue/test-utils”: “^1.0.0-beta.12”, 安装完成之后进入vue项目目录 npm run ...

    基于老版没有用typescript的vue-cli做单元测试,
    配置如下
    需要下载测试最好不要带vue-router
    “chai”: “^4.1.2”,
    karma与mocha
    “@vue/test-utils”: “^1.0.0-beta.12”,
    安装完成之后进入vue项目目录
    npm run unit
    然后在unit目录下面生成 spec文件
    import {mount} from ‘@vue/test-utils’
    import Todo from ‘@/components/Todo’

    //创建测试用例
    describe('todo测试',()=>{
    it("测试查看",()=>{
    
        const warp=mount(Todo);//mount渲染
       // console.log(warp.find('.list'));
       // console.log(warp.vm.list);
        //vm是组件实例所有内容
       expect(warp.vm.list.length).to.be.equal(1)//list是组件data里面的数据
     
    }),
    it("测试增加",()=>{
        const warp=mount(Todo);
        expect(warp.vm.list.push({id:1,value:2})).to.be.equal(2)//expeect断言
    })})
    
    展开全文
  • Vue 单元测试

    2019-10-11 10:25:06
    单元测试,就是为了测试某一个类或者是某一个方法能否正常工作而写的测试代码。 关于单元测试 是什么:单元测试是针对 程序的最小单元 来进行正确性检验的测试工作。就是测试某一个页面或者是某一个方法来进行测试的...

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

    关于单元测试

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

    意义:可以减少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);
      })
    })
    
    展开全文
  • vue 单元测试

    2020-06-11 09:34:10
    npm install jest vue-jest babel-jest @vue/test-utils -D 编写 jest 配置文件 // unit-testing-demo\test\unit\jest.conf.js const path = require('path') module.exports = { verbose: true, testURL: '...
  • 书接上文,karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率。今天来说一下vue单元测试思路和case的写法。测试框架使用jasmine,语法参考。 代码地址:...
  • Vue单元测试视频

    2019-09-30 09:30:37
    Vue单元测试视频 简单的视频教程帮你学习单元测试,~~
  • Vue 单元测试详解

    2020-07-03 09:37:42
    了解前端单元测试或者Vue单元测试的意见,单元测试的目的,一些常用的单元测试,jest+Vue Test Utils和其它Karma + Mocha+ + Chai+ Vue-Test-Utils单元测试工具的区别。
  • 本篇文章主要介绍了详解Vue单元测试Karma+Mocha学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了关于Vue单元测试的几个坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本篇文章主要介绍了karma+webpack搭建vue单元测试环境的方法示例,这次搭建的测试环境和开发环境隔离,所以理论上适用所有使用vue的开发环境。感兴趣的小伙伴们可以参考一下
  • Vue单元测试case写法

    千次阅读 2017-06-23 17:01:51
    书接上文,karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率。今天来说一下vue单元测试思路和case的写法。测试框架使用jasmine,语法参考。 代码地址:...
  • vue单元测试笔记

    2019-04-17 14:36:47
    1、vue单元测试工具/框架概述 vue test utils vue test utils 通过将组件隔离挂载,然后模拟必要的输入 ( prop、注入、用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试Vue组件。 vue-test-utils ...
  • 前端vue单元测试环境搭建(二)

    千次阅读 2019-06-30 17:34:01
    文章目录前端vue单元测试环境搭建开始创建带有mocha的vue项目运行测试文件目录执行测试注意完善vue-cli提供的测试配置@vue/cli-plugin-unit-mocha提供的命令配置mocha-webpack.opts集成插件/工具Sinon介绍安装@vue/...
  • Vue单元测试Karma+Mocha

    2019-01-28 00:03:00
    Vue单元测试Karma+Mocha Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。 换句话说,它是一个测试工具,能让你的代码...
  • by Edd Yerburgh 埃德·... 使用Tape和Vue Test Utils编写快速的Vue单元测试 (Write blazing fast Vue unit tests with Tape and Vue Test Utils) Tape is the fastest framework for unit testing Vue components. ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,209
精华内容 5,683
关键字:

vue单元测试

vue 订阅