0


Vue--单元测试

1.什么是单元测试

单元测试是对软件中的最小可测试单元进行测试。(最小可测试单元是要有结果产出的。例如某个方法,单独的某个操作)

单元测试其实是伴随着敏捷开发,它是对更快开发的一种追求。早发现错误比晚发现错误会更好,保证自己的代码符合要求。

单元测试优点:

分模块开发,更容易定位到哪个单元出了问题;

保证了代码质量;

驱动开发;

具体流程:

立项--原型图--分析功能需求--单个功能--写单元测试--开始写代码--跑单元测试--提交代码

单元测试是测试驱动开发:

分析需求,根据需求设计功能;

根据功能设计单元测试,先编写单元测试;

编写代码;

保证代码通过单元测试;

测试用例

为了某个特殊目标而编织的一系列测试输入,执行,以及输出结果,来测试是否满足需求。

测试套件

一组单元测试组合成测试套件(例如:弹窗组件)

2.单元测试有哪些常用库?

测试框架:运行单元测试。

Jest - 开箱即用,简单轻松(断言库,mock库-Chai,test runner,覆盖率工具都配置好了 ) Mocha - 需要自己配置

断言库:检测方法是否符合预期。

Chai - 支持所有风格

Assert - node环境直接使用

mock库:当有外部依赖/数据 时,通过mock库来进行屏蔽。

sinon - 单元测试用到的mock库。 注意:mock.js是开发端,进行mock接口的。

test runner:模拟单元测试浏览环境。

karma

覆盖率工具:产生覆盖率报告。

istanbul

用覆盖率工具产生的覆盖率有3种:

行覆盖率:可执行语句执行比例。

函数覆盖率:函数被调用的比例。

分支覆盖率:判断语句分支被执行的比例。(if-else分支)

3.基本的使用

安装jest

npm install jest

业务代码

function add (a, b){
   return a + b;
}

测试用例--用it开启一个测试用例

it("单元测试描述:", () => {
    expect(add(1,2)).toEqual(3);
})

运行

进入到项目文件夹,执行jest命令

异步操作,使用回调

function c(a, b, cb){
    setTimeout(()=>{
        cb(a+b);
    },1000)  
}

异步操作,使用Promise

function c(a, b, cb){
   return new Promise(
        setTimeout(()=>{
            cb(a+b);
        },1000)
    )  
}

异步测试用例--回调

it("异步回调测试用例", (done) =>{
   function callback(result){
       expect(result).toEqual(3);
       done();
   } 
   c(1, 2, callback)
})

异步测试用例--Promise

it("异步Promise测试用例", (done) =>{
   c(1, 2).then(() => {
       expect(result).toEqual(3);
   })
})    

外部依赖

const mode =require("./mode.js");

//mode.js
module.exports = {
    f1: function(){
        return 3
    }
}

d方法

function d(){
   var res = mode.f1();
   return ++res;
}

测试d方法,把f1方法屏蔽掉

jest.mock("./mode");

测试用例--外部依赖

it("外部依赖测试用例",() => {
    var f1mock = mode.f1.mockReturnValue(2);
    expect(d()).toEqual(3);
})

4.在vue中基本的使用

vue-cli,不需要自己去配单元测试,初始化项目时,可选择添加单元测试。

测试套件:一大堆单元测试组合到一起,组合成测试套件。针对某一个组件的测试,都算一个测试套件。

例子:

HelloWorld.vue

mounted: function(){
    axios.get('/api').then((data)=>{
        this.data = data;
    })
}

HelloWorld.spec.js

describe('test HelloWorld', ()=>{
    it("render data", () =>{
        jest.mock("axios");
        jest.spyOn(axios,"get").mockResolvedValue({
            data:[
                {content: "this is 1"},
                {content: "this is 2"}
            ]
        });
        setTimeout(()=>{
             const wrapper = mount(HelloWorld);
             expect(wrapper.html()).toContain("this is 1");
             expect(wrapper.html()).toContain("this is 2")
        })
       
    })
});
标签: 单元测试 vue

本文转载自: https://blog.csdn.net/Scarlett456/article/details/123369208
版权归原作者 Scarlett456 所有, 如有侵权,请联系我们删除。

“Vue--单元测试”的评论:

还没有评论