为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 前端自动化测试（二）

前端自动化测试（二）

标签：
Node.js Html5 JavaScript

前端自动化测试（二）

上一篇文章，我们已经讲述了Jest中的基本使用，这一篇我们来说说如何深度使用Jest

在测试中我们会遇到很多问题，像如何测试异步逻辑，如何mock接口数据等…

通过这一篇文章，可以让你在开发中对Jest的应用游刃有余，让我们逐一击破各个疑惑吧！

1.Jest进阶使用

1.1 异步函数的测试

提到异步无非就两种情况，一种是回调函数的方式，另一种就是现在流行的promise方式


export  const  getDataThroughCallback  = fn => {

setTimeout(() => {

fn({

name: "webyouxuan"

});

}, 1000);

};

  

export  const  getDataThroughPromise  = () => {

return  new  Promise((resolve, reject) => {

setTimeout(() => {

resolve({

name: "webyouxuan"

});

}, 1000);

});

};

我们来编写async.test.js方法


import {getDataThroughCallback,getDataThroughPromise} from  './3.getData';

  

// 默认测试用例不会等待测试完成，所以增加done参数，当完成时调用done函数

it('测试传入回调函数 获取异步返回结果',(done)=>{ // 异步测试方法可以通过done

getDataThroughCallback((data)=>{

expect(data).toEqual({

name:'webyouxuan'

});

done();

})

})

// 返回一个promise 会等待这个promise执行完成

it('测试promise 返回结果 1',()=>{

return  getDataThroughPromise().then(data=>{

expect(data).toEqual({

name:'webyouxuan'

});

})

})

// 直接使用async + await语法

it('测试promise 返回结果 2',async ()=>{

let  data  =  await  getDataThroughPromise();

expect(data).toEqual({

name:'webyouxuan'

});

})

// 使用自带匹配器

it('测试promise 返回结果 3',async ()=>{

expect(getDataThroughPromise()).resolves.toMatchObject({

name:'webyouxuan'

})

})

2.Jest中的mock

2.1 模拟函数jest.fn()

为什么要模拟函数呢？来看下面这种场景，你要如何测试


export  const  myMap  = (arr,fn) =>{

return  arr.map(fn)

}

打眼一看很简单，我们只需要判断函数的返回结果就可以了，像这样


import { myMap } from  "./map";

it("测试 map方法", () => {

let  fn  = item =>  item  *  2;

expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);

});

但是我们想更细致一些，像每一次调用函数传入的是否是数组的每一项，函数是否被调用了三次，说的更明确些就是想追溯函数具体的执行过程！


import { myMap } from  "./map";

it("测试 map 方法", () => {

// 通过jest.fn声明的函数可以被追溯

let  fn  =  jest.fn(item => (item  *=  2));

expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);

// 调用3次

expect(fn.mock.calls.length).toBe(3);

// 每次函数返回的值是 2,4,6

expect(fn.mock.results.map(item=>item.value)).toEqual([2,4,6])

});

详细看下这个mock中都有什么东东

图片描述

2.2 模拟文件jest.mock()

我们希望对接口进行mock，可以直接在__mocks__目录下创建同名文件，将整个文件mock掉，例如当前文件叫api.js


import  axios  from  "axios";

  

export  const  fetchUser  = ()=>{

return  axios.get('/user')

}

export  const  fetchList  = ()=>{

return  axios.get('/list')

}

创建__mocks__/api.js


export  const  fetchUser  = ()=>{

return  new  Promise((resolve,reject)=>  resolve({user:'webyouxuan'}))

}

export  const  fetchList  = ()=>{

return  new  Promise((resolve,reject)=>resolve(['香蕉','苹果']))

}

开始测试


jest.mock('./api.js'); // 使用__mocks__ 下的api.js

import {fetchList,fetchUser} from  './api'; // 引入mock的方法

it('fetchUser测试',async ()=>{

let  data  =  await  fetchUser();

expect(data).toEqual({user:'webyouxuan'})

})

  

it('fetchList测试',async ()=>{

let  data  =  await  fetchList();

expect(data).toEqual(['香蕉','苹果'])

})

这里需要注意的是，如果mock的api.js方法不全，在测试时可能还需要引入原文件的方法，那么需要使用jest.requireActual('./api.js') 引入真实的文件。

这里我们需要考虑这样做是不是有些麻烦呢，其实只是想将真正的请求mock掉而已，那么我们是不是可以直接mock axios方法呢？

在__mocks__下创建 axios.js，重写get方法


export  default {

get(url){

return  new  Promise((resolve,reject)=>{

if(url  ===  '/user'){

resolve({user:'webyouxuan'});

}else  if(url  ===  '/list'){

resolve(['香蕉','苹果']);

}

})

}

}

当方法中调用axios时默认会找__mocks__/axios.js


jest.mock('axios'); // mock axios方法

import {fetchList,fetchUser} from  './api';

it('fetchUser测试',async ()=>{

let  data  =  await  fetchUser();

expect(data).toEqual({user:'webyouxuan'})

})

  

it('fetchList测试',async ()=>{

let  data  =  await  fetchList();

expect(data).toEqual(['香蕉','苹果'])

})

2.3 模拟Timer

接着来看这个案例，我们期望传入一个callback，想看下callback能否被调用


export  const  timer  = callback=>{

setTimeout(()=>{

callback();

},2000)

}

因此我们很容易写出了这样的测试用例


import {timer} from  './timer';

it('callback 是否会执行',(done)=>{

let  fn  =  jest.fn();

timer(fn);

setTimeout(()=>{

expect(fn).toHaveBeenCalled();

done();

},2500)

});

有没有觉得这样很蠢，如果时间很长呢？很多个定时器呢？这时候我们就想到了mock Timer


import {timer} from  './timer';

jest.useFakeTimers();

it('callback 是否会执行',()=>{

let  fn  =  jest.fn();

timer(fn);

// 运行所有定时器，如果需要测试的代码是个秒表呢？

// jest.runAllTimers();

// 将时间向后移动2.5s

// jest.advanceTimersByTime(2500);

  

// 只运行当前等待定时器

jest.runOnlyPendingTimers();

expect(fn).toHaveBeenCalled();

});

3. Jest中的钩子函数

为了测试的便利，Jest中也提供了类似于Vue一样的钩子函数，可以在执行测试用例前或者后来执行


class  Counter {

constructor() {

this.count  =  0;

}

add(count) {

this.count  +=  count;

}

}

module.exports  =  Counter;

我们要测试Counter类中add方法是否符合预期，来编写测试用例


import  Counter  from  './hook'

it('测试 counter增加 1 功能',()=>{

let  counter  =  new  Counter; // 每个测试用例都需要创建一个counter实例，防止相互影响

counter.add(1);

expect(counter.count).toBe(1)

})

  

it('测试 counter增加 2 功能',()=>{

let  counter  =  new  Counter;

counter.add(2);

expect(counter.count).toBe(2)

})

我们发现每个测试用例都需要基于一个新的counter实例来测试，防止测试用例间的相互影响，这时候我们可以把重复的逻辑放到钩子中！

钩子函数

  • beforeAll 在所有测试用例执行前执行

  • afteraAll 在所有测试用例执行后

  • beforeEach 在每个用例执行前

  • afterEach 在每个用例执行后


import  Counter  from  "./hook";

let  counter  =  null;

beforeAll(()=>{

console.log('before all')

});

afterAll(()=>{

console.log('after all')

});

beforeEach(() => {

console.log('each')

counter  =  new  Counter();

});

afterEach(()=>{

console.log('after');

});

it("测试 counter增加 1 功能", () => {

counter.add(1);

expect(counter.count).toBe(1);

});

it("测试 counter增加 2 功能", () => {

counter.add(2);

expect(counter.count).toBe(2);

});

钩子函数可以多次注册，一般我们通过describe 来划分作用域


import  Counter  from  "./hook";

let  counter  =  null;

beforeAll(() =>  console.log("before all"));

afterAll(() =>  console.log("after all"));

beforeEach(() => {

counter  =  new  Counter();

});

describe("划分作用域", () => {

beforeAll(() =>  console.log("inner before")); // 这里注册的钩子只对当前describe下的测试用例生效

afterAll(() =>  console.log("inner after"));

it("测试 counter增加 1 功能", () => {

counter.add(1);

expect(counter.count).toBe(1);

});

});

it("测试 counter增加 2 功能", () => {

counter.add(2);

expect(counter.count).toBe(2);

});

// before all => inner before=> inner after => after all

// 执行顺序很像洋葱模型 ^-^

4.Jest中的配置文件

我们可以通过jest命令生成jest的配置文件


npx jest --init

会提示我们选择配置项：


➜ unit npx jest --init

The following questions will help Jest to create a suitable configuration for your project

# 使用jsdom

✔ Choose the test environment that will be used for testing › jsdom (browser-like)

# 添加覆盖率

✔ Do you want Jest to add coverage reports? … yes

# 每次运行测试时会清除所有的mock

✔ Automatically clear mock calls and instances between every test? … yes

在当前目录下会产生一个jest.config.js的配置文件

5.Jest覆盖率

刚才产生的配置文件我们已经勾选需要产生覆盖率报表，所以在运行时我们可以直接增加 --coverage参数


"scripts": {

"test": "jest --coverage"

}

可以直接执行npm run test，此时我们当前项目下就会产生coverage报表来查看当前项目的覆盖率


----------|----------|----------|----------|----------|-------------------|

File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |

----------|----------|----------|----------|----------|-------------------|

All files | 100 | 100 | 100 | 100 |  |

hook.js | 100 | 100 | 100 | 100 |  |

----------|----------|----------|----------|----------|-------------------|

Test Suites: 1 passed, 1 total

Tests: 2 passed, 2 total

Snapshots: 0 total

Time: 1.856s, estimated 2s

命令行下也会有报表的提示，jest增加覆盖率还是非常方便的~

  • Stmts表示语句的覆盖率

  • Branch表示分支的覆盖率(if、else)

  • Funcs函数的覆盖率

  • Lines代码行数的覆盖率

到此我们的Jest常见的使用已经基本差不多了！下一篇文章我们来看看如何利用Jest来测试Vue项目，敬请期待！

点击查看更多内容
发表于 2019.09.10 17:01， 共 1886 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

前端优选

Web前端工程师
手记
篇
粉丝
6
获赞与收藏
7

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消