JS单元测试

1. 环境准备

初始项目

cnpm init
//或者
yarn init

安装jest

cnpm install --save-dev jest
// 或者
yarn add --dev jest

下载和配置babel
（如果不使用ES6语法，则可以跳过此步骤）

cnpm install @babel/plugin-transform-modules-commonjs --save-dev

新建一个.babelrc文件，写入如下内容，或者直接在package.json中配置。

{
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

2. 基础函数测试

① toBe
精确的比较，本质是用Object.is来比较，取反使用not.toBe

export function sum(a, b) {
     return a + b;
}

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

② toEqual

可以用来比较对象的值是否相同

export function returnObj(age) {
     return {
          name: "小哈",
          age: age + 1
     }
}

test('compare object', () => {
    let result = returnObj(10);
    expect(result).toEqual({name: "小哈", age: 11 });
    expect(result).toBe({name: "小哈", age: 11 });
});

③ 函数抛出异常的测试

// 3. 抛出异常
export function throwError() {
     throw new Error("i am sorry,there has something wrong!")
}

test('test error funciton', () => {
    expect(throwError).toThrow(Error);
})

④ 其他可以根据特定的情况选择方法

test('sth special in need', () => {
    let data1 = null, data2, data3 = 0.1 + 0.2;
    expect(data1).toBeNull;
    expect(data2).toBeDefined;
    expect(data3).toBeCloseTo(0.3);
    expect(1 === 1).toBeTruthy();
    expect(0 === 1).toBeFalsy();
})

浮点数的比较，由于精度的差异，则可以使用toBeCloseTo来比较
⑤专门测试，跳过其他测试

用于重点排查一些错误，可以使用only，例：

test.only('...', () => {
  expect(true).toBe(false);
});

3. 异步函数测试

在js中最常见的就是请求异步函数了，业务中基本都是增删改查，CURD；如果在测试中直接使用回调函数，但是jest测试执行到末尾就会结束，不会等待回调完成；

举个例子：

异步函数定义

export function fetchData(callback) {
     try {
          setTimeout(() => {
               callback("success");
          }, 2000)
     }catch(err) {
          callback("failed");
     }
}

①直接调用测试：

import { fetchData, Asynchronous } from './functionModules';
test("call the async function directly", () => {
  function callback(info) {
      expect(info).toBe("success");
      console.log("I'm callback function, I have performed")
  }
  fetchData(callback);
})

可以发现打印没有被执行，直接测试成功，等不及callback执行，直接跳过了。
②对①进行改进，使用done

test("call the async function with done", done => {
  function callback(info) {
    try{
      expect(info).toBe("success");
      done();
    }catch(err) {
      done(err);
    }
  }
  fetchData(callback);
})

jest测试会等待done被执行，如果没有任何done被执行，则会发生超时错误，所以我们要使用try...catch来捕获异常，所以此处会等待expect被执行。
③使用返回一个promise的方法
注意点就是一定要return!!!
调用的函数：

/**
 * 返回异步函数
 */
export function Asynchronous() {
     return new Promise((resolve, reject) => {
          try {
               setTimeout(() => {
                    resolve("success")
               }, 2000)
          }catch(err) {
               reject("failed")
          }
     })
}
/**
 * 返回异步函数，发生错误情况reject
 */
export function AsynchronousFailed() {
     return new Promise((resolve, reject) => {
          try {
               throw Error("failed");
          }catch(err) {
               reject("failed")
          }
     })
}

jest测试，以下都会通过

test("use promise when resolve", () => {
  return Asynchronous().then(res => {
    expect(res).toBe("success")
  })
})
test("use promise when resolve", () => {
  return AsynchronousFailed().catch(err => {
    expect.assertions(1);
    expect(err).toBe("failed")
  })
})

可以发现此处用到了expect.assertions，顾名思义，此处就是声明断言的次数，经常用于异步的代码中，为了确保断言的回调能够按照预期进行。
expect.assertions
④直接测试resolve/reject
同样的需要return返回才会等待异步的执行，注意是resolve + s， reject + s

test("judge resolve directly", () => {
  return expect(Asynchronous()).resolves.toBe("success")
})

test("judge reject directly", () => {
  return expect(AsynchronousFailed()).rejects.toBe("failed")
})

如果使用async，await则可以改写成：

test("judge reject directly when use async", async () => {
  await expect(AsynchronousFailed()).rejects.toBe("failed")
})

test("judge reject directly when use async", async () => {
  await expect(AsynchronousFailed()).rejects.toBe("failed")
})

4. 生命周期

  • 当我们需要在每个单元测试前都执行某些操作，我们可以使用beforeEach，相应的也有每次执行结束之后的方法：afterEach;
  • 如果我们需要在每次测试的开头，有且进执行一次，则可以使用beforeAll， 对应结束之后的方法：afterAll。
  • 如果是对特定的单元测试，特定时候执行某些操作，则可以使用describe块包裹起来，这样在块中定义的方法只有对内部起作用。
    举个例子:
import { sum } from './functionModules';

beforeEach(() => console.log("beforeEach-1"));
afterEach(() => console.log("afterEach-1"));
beforeAll(() => console.log("beforeAll-1"));
afterAll(() => console.log("afterAll-1"));
test("test1", () => console.log("test1"));
console.log("outer")
describe("test2", () => {
  beforeEach(() => console.log("beforeEach-2"));
  afterEach(() => console.log("afterEach-2"));
  beforeAll(() => console.log("beforeAll-2"));
  afterAll(() => console.log("afterAll-2"));
  test("child test", () => {
    console.log("test2")
    expect(sum(1, 2)).toBe(3)
  })
  console.log("inner")
})
test("test3", () => console.log("test3"));

优先级规则：

beforeAll ->
beforeEach ->  测试内容1 -> afterEach
beforeEach ->  测试内容2 -> afterEach
// 如果有describe， 继续按照此规则
afterAll

注意describe中的test执行时，全局的beforeEach也会被执行，jest会在真正测试开始之前执行所有其他代码，默认按测试顺序执行，执行结果如下：

outer
inner
beforeAll-1
// 执行外层第一个test
beforeEach-1
test1
afterEach-1
// 执行describe块
beforeAll-2
beforeEach-1
beforeEach-2
test2
afterEach-2
afterEach-1
afterAll-2
// 执行外层第二个test
beforeEach-1
test3
afterEach-1
afterAll-1

5. mock函数

我们可以擦除函数的实际实现，使用mock函数

  • 捕获对函数的调用
  • 改变内部结构
  • 在使用 new 实例化时捕获构造函数的实例
  • 允许测试时配置返回值

下面介绍几种mock函数中常用的方法和属性：
① jest.fn()
使用mock函数，我们可以根据特定的方法或者mock属性获取返回值，调用参数，调用情况等等。

test("mock function", () =>{
  let fn = jest.fn();
  // 使用mockReturnValueOnce可以链式设置返回值
  fn.mockReturnValueOnce('a').mockReturnValueOnce('b');
  let res1 = fn(1, 2), res2 = fn(3, 4);
  
  // 获取返回值
  expect(res1).toBe('a');
  expect(res2).toBe('b');
  expect(fn.mock.results[0].value).toBe('a');
  expect(fn.mock.results[1].value).toBe('b');

  // 是否被调用了
  expect(fn).toBeCalled();

  // 判断调用的次数
  expect(fn).toBeCalledTimes(2);
  expect(fn.mock.calls.length).toBe(2);

  // 判断调用的参数
  expect(fn).toHaveBeenCalledWith(1, 2);
  expect(fn).toHaveBeenCalledWith(3, 4);

  // 第一次调用的第一个参数值
  expect(fn.mock.calls[0][0]).toBe(1);
}, [])

使用mock promise函数

test('test jest.fn() by Promise', async () => {
  let fn = jest.fn().mockResolvedValue('a');
  let res = await fn();
  expect(res).toBe('a');
  expect(Object.prototype.toString.call(fn())).toBe("[object Promise]");
})

测试axios请求的API：

/**
 * axios 请求函数
 * @param { function } callback
 */
export async function getToDoList(callback) {
     return axios.get("https://jsonplaceholder.typicode.com/todos").then(res => {
          callback(res.data)
          return res;
     })
}

对应的jest测试：

test("test axios", async () => {
  expect.assertions(1);
  let fn = jest.fn();
  await getToDoList(fn); 
  console.log(fn.mock.calls[0][0].data) // 打印出结果
  expect(fn).toBeCalledTimes(1); // 判断fn是否被调用了一次
})

还可以不调用具体的API，通过mock返回假数据，即：fake response

import axios from 'axios';
import { getToDoList } from './functionModules';
jest.mock('axios');

test("pretend to call axios api", async () => {
  let myResult = { data: [{id: 1, title: "get up early", complete: false}] };
  axios.get.mockResolvedValue(myResult);
  //axios.get.mockImplementation(() => Promise.resolve(myResult))
  return getToDoList(() => {}).then(data => expect(data).toEqual(myResult));
})

注意此处要和上面的代码分开两个文件，否则会影响真实API测试的结果。当我们需要定义一个模块函数的默认实现时，我们可以使用mockImplementation来模拟数据，如上，使用注释的语句，测试也能通过。
以下代码来自官网

// foo.js
module.exports = function () {
  // some implementation;
};
// test.js
jest.mock('../foo'); // this happens automatically with automocking
const foo = require('../foo');

// foo is a mock function
foo.mockImplementation(() => 42);
foo();

同样可以根据调用顺序设置返回值，当mockImplementationOnce定义的都执行完成了，则会执行jest.fn中定义的。

const myMockFn = jest
  .fn()
  .mockImplementationOnce(cb => cb(null, true))
  .mockImplementationOnce(cb => cb(null, false));

myMockFn((err, val) => console.log(val));
// > true

myMockFn((err, val) => console.log(val));
// > false

参考资料

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