前端自动化测试--03进阶

在测试中我们会遇到很多问题，像如何测试异步逻辑，如何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中都有什么东东

[图片上传失败...(image-94234-1587307967178)]

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项目，敬请期待！

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345