0%

一杯茶的时间,上手Jest测试框架

我们能学到什么

  1. Jest怎么4行代码完成一个测试用例
  2. Jest怎么让测试用例覆盖率100%
  3. Jest怎么和Typescript完美结合(填坑实录)
  4. Jest最锋利的功能 Mock Functions

项目初始化

创建工程

# 注意powershell中'&&'替换为';'
mkdir jest-just-go && cd jest-just-go

初始化

npm init -y

安装依赖

npm i jest --save-dev

1.Jest怎么4行代码完成一个测试用例

初始化Jest默认配置

npx jest --init

初始化时会出现提示信息,按y或enter即可

编写功能代码

现在让我们正式开始,茶和图雀社区精心准备的甜品更搭哦。

在项目根目录下新建src目录,存放我们的功能代码。然后创建src/dessert.js

src/dessert.js
const dessert = function (name) {
this.name = name;
}

dessert.prototype = {
enjoy: function () {
return "Enjoy the " + this.name;
}
}

module.exports = dessert;

我们已经编写了一个甜品类型,它有一个提供品尝的方法enjoy

编写测试用例

下面开始编码,实现对上面甜品功能的单元测试。

在项目根目录下新建__tests__目录,存放我们的测试用例。然后创建__tests__/dessert.test.js

__tests__/dessert.test.js
const dessert = require("../src/dessert");

describe("test dessert feature", () => {
test("enjoy the cake", () => {
const cake = new dessert('cake');
expect(cake.enjoy()).toBe("Enjoy the cake");
})
})

简单的四行代码,我们的第一个测试用例就已经大功告成。这里我们只需要注意describetestexpect这3个Jest关键字就行了:

  1. describe:组合同一类的test用例,可以添加beforeEach \ afterEach、beforeAll \ afterAll(这里由于篇幅,这一类进阶特性将放在后续的教程中)为其下所有test进行统一描述和处理。
  2. test:描述具体的测试用例,是单元测试的最小单元。
  3. expectJest最终落在了每一个对测试结果的期望上,通过expect中的返回值或是函数执行结果来和期望值进行对比。

执行测试

回到控制台,输入:

npm test

无需更多配置,测试结果显示:

其中:

  • %Stmts是语句覆盖率(statement coverage):是不是每个语句都执行了?
  • %Branch分支覆盖率(branch coverage):是不是每个if代码块都执行了?
  • %Funcs函数覆盖率(function coverage):是不是每个函数都调用了?
  • %Lines行覆盖率(line coverage):是不是每一行都执行了?

%Stmts%Lines的区别是:行覆盖率的颗粒度是大于语句覆盖率的,因为可能允许一行中有多条语句(js开发中尤为常见)。

我们更改__tests__/dessert.test.js中的

expect(cake.enjoy()).toBe("Enjoy the cake");
改为
expect(cake.enjoy()).toBe("enjoy the cake");

执行测试命令查看测试不通过的情形:

2.Jest怎么让测试用例覆盖率达到100%

当我们的功能场景逐渐变得复杂,我们的测试就必须确保测试用例的覆盖率达到一个标准。最佳当然是100%啦,这样才能保证测试小改改们找不到我们的茬,闲的没事就会主动找我们拉话话啦,美好生活从测试用例覆盖率100%开始。

编写功能代码

甜点不够怎么办?要不我们开家店吧!先让红豆烧和提拉米苏够吃先~

src/dessertFactoty.js
const dessert = require("./dessert");

const dessertFactory = function () {
}

dessertFactory.produce = function (type) {
switch (type) {
case 'Red bean burning':
return new dessert('Red bean burning'); // 红豆烧
case 'Tiramisu':
return new dessert('Tiramisu'); // 提拉米苏
default:
throw new Error("please choose a dessert type");
}
}

module.exports = dessertFactory;

现在想吃什么通过dessertFactory.produce(...) order就fine啦

编写测试用例

不过,要保证我们想吃的时候就必须能吃到(这个很重要),我们先验收先:

__tests__/dessertFactory.test.js
const dessertFactoty = require("../src/dessertFactoty");

describe("test dessertFactoty feature", () => {
test("produce all dessert", () => {
const dessertType = ['Red bean burning', 'Tiramisu'];
expect(dessertFactoty.produce(dessertType[0]).enjoy()).toBe("Enjoy the Red bean burning");
})
})

–“我不要你觉得,我要我觉得“,我要上档次的“验收报告“!

–行,网页展示出来怎么样

###
配置jest.config.js保存测试用例覆盖率执行报告

我们在执初始化Jest默认配置的时候,会生成在项目根目录下生成jest.config.js,里面列出了所有的配置项,未设置的已经被注释掉了。我们要将每次执行测试后生成的覆盖率报告保存下来需要找到下面这项配置属性并更改:

// Indicates whether the coverage information should be collected while executing the test
collectCoverage: true,

然后我们可以再次执行测试命令并用浏览器打开***.\coverage\lcov-report\index.html***查看测试用例覆盖率报告:

修改测试用例使覆盖率达到100%

.\__tests__\dessertFactory.test.js

const dessertFactoty = require("../src/dessertFactoty");

describe("test dessertFactoty feature", () => {
test("produce all dessert", () => {
const dessertType = ['Red bean burning', 'Tiramisu'];
expect(dessertFactoty.produce(dessertType[0]).enjoy()).toBe("Enjoy the Red bean burning");
expect(dessertFactoty.produce(dessertType[1]).enjoy()).toBe("Enjoy the Tiramisu");
expect(() => { dessertFactoty.produce('Luckin Coffee') }).toThrow("please choose a dessert type");
})
})

再测试并查看覆盖率报告:

这里Functions列为什么不是100%,大家可以点击dessertFactory.js根据详细说明分析推测。

3.Jest怎么和Typescript完美结合(填坑实录)

搜索引擎上现有的Jest+Typescript的样例比较少,并且存在了一定的问题没有解决,这一部分我已经填平了坑,可以作为配置参考。

增加依赖

npm i ts-jest @types/jest typescript @types/node --save-dev

ts初始化

tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"es2015"
],
"strict": true,
"declaration": true,
"outDir": "build",
"sourceMap": true
},
"include": [
"src/**/*",
"__test__/**/*"
],
"exclude": [
"node_modules"
]
}

修改jest.config.js配置

添加如下配置项:

// An array of file extensions your modules use
moduleFileExtensions: [
"js",
"json",
"jsx",
"ts",
"tsx",
"node"
],
// A preset that is used as a base for Jest's configuration
preset: "ts-jest",

修改功能代码

src/dessert.ts
export default class dessert {
name: string;
constructor(name: string) {
this.name = name;
}
enjoy() {
return "Enjoy the " + this.name;
}
}
src/dessertFactoty.ts
import dessert from "./dessert";

export default class dessertFactory {
static produce(type: string) {
switch (type) {
case 'Red bean burning':
return new dessert('Red bean burning'); // 红豆烧
case 'Tiramisu':
return new dessert('Tiramisu'); // 提拉米苏
default:
throw new Error("please choose a dessert type");
}
}
}

###
修改测试用例

__tests__/dessert.test.ts
[tuture-del]const dessert = require("../src/dessert");
[tuture-add]import dessert from "../src/dessert";

describe("test dessert feature", () => {
test("enjoy the cake", () => {
const cake = new dessert('cake');
[tuture-del] expect(cake.enjoy()).toBe("enjoy the cake");
[tuture-add] expect(cake.enjoy()).toBe("Enjoy the cake");
})
})
__tests__/dessertFactory.test.ts
[tuture-del]const dessertFactoty = require("../src/dessertFactoty");
[tuture-add]import dessertFactoty from "../src/dessertFactoty";

describe("test dessertFactoty feature", () => {
test("produce all dessert", () => {
const dessertType = ['Red bean burning', 'Tiramisu'];
expect(dessertFactoty.produce(dessertType[0]).enjoy()).toBe("Enjoy the Red bean burning");
[tuture-add] expect(dessertFactoty.produce(dessertType[1]).enjoy()).toBe("Enjoy the Tiramisu");
[tuture-add] expect(() => { dessertFactoty.produce('Luckin Coffee') }).toThrow("please choose a dessert type");
})
})

如同代码重构后我们通过测试用例可以快速检查是否改动出现差错一样,我们这次变更可以执行Jest测试命令,检查是否对功能无影响。

4.Jest最锋利的功能 Mock Functions

关于Jest测试框架中的Mock功能,我们主要关注两点:

  1. mock function: 对函数进行mock.
  2. mock return value: 对返回值进行mock.

从以上两点可以衍生出Jest对于代码单元测试中两项常用的锋利功能:

  1. 对功能中业务逻辑简化后的重新实现,方便有指向性的进行测试(比如忽略实际场景中的跨服务调用功能等,仅需将原有功能中对应的调用逻辑改为定义的测试数据即可)。
  2. 对功能返回值的直接模拟。

为甜点增加了评论功能。

src/dessert.ts
export default class dessert {
name: string;
[tuture-add] static comment: string[] = [];
constructor(name: string) {
this.name = name;
}
enjoy() {
return "Enjoy the " + this.name;
}
[tuture-add] static comments(message: string) {
[tuture-add] dessert.comment.push(message);
[tuture-add] }
}

专门建立一个互动区进行甜点的讨论。创建src/dessertCommentModule.ts:

src/desserCommentModule.ts
import dessert from "./dessert";

module desserCommentModule {
export function comments(message: string) {
dessert.comments(message);
return dessert.comment;
}

}

export default desserCommentModule;

下面开始test dessert feature with mock~这一部分均已通过测试,建议深入研读代码,感受Jest mock每一处的奥妙。如果下面各处期望的结果都如你所料,那么你就是图雀社区最靓的仔:

__tests__/dessert.test.ts
import dessert from "../src/dessert";
[tuture-add]import desserCommentModule from "../src/desserCommentModule";
[tuture-add]jest.mock("../src/desserCommentModule");

describe("test dessert feature", () => {
test("enjoy the cake", () => {
const cake = new dessert('cake');
expect(cake.enjoy()).toBe("Enjoy the cake");
})
[tuture-add]})
[tuture-add]
[tuture-add]describe("test dessert feature with mock", () => {
[tuture-add] test("enjoy the cake with mock function", () => {
[tuture-add] const dessertFactoryMock = jest.fn(name => new dessert(name));
[tuture-add] const cake = dessertFactoryMock('cake');
[tuture-add] expect(cake.enjoy()).toBe("Enjoy the cake");
[tuture-add] expect(dessertFactoryMock.mock.results[0].value.enjoy()).toBe("Enjoy the cake");
[tuture-add] console.log(dessertFactoryMock.mock);
[tuture-add] })
[tuture-add] test("enjoy the cake with mock return value", () => {
[tuture-add] const dessertFactoryMock = jest.fn(name => new dessert(name));
[tuture-add] const cake = new dessert('cake');
[tuture-add] dessertFactoryMock.mockReturnValue(cake);
[tuture-add] const tiramisu = dessertFactoryMock('tiramisu');
[tuture-add] expect(tiramisu.enjoy()).toBe("Enjoy the cake");
[tuture-add] expect(tiramisu).toEqual(cake);
[tuture-add] expect(dessertFactoryMock.mock.results[0].value).toEqual(cake);
[tuture-add] })
[tuture-add] test("comment the dessert with mock module", () => {
[tuture-add] const mockedDessert = desserCommentModule as jest.Mocked<typeof desserCommentModule>;
[tuture-add] mockedDessert.comments.mockReturnValue(['not bad']);
[tuture-add] expect(mockedDessert.comments("cake is so good")).toEqual(['not bad']);
[tuture-add] expect(dessert.comment).toEqual([]);
[tuture-add] })
[tuture-add] test("comment the dessert with mock implementations", () => {
[tuture-add] const mockedDessert = desserCommentModule as jest.Mocked<typeof desserCommentModule>;
[tuture-add] mockedDessert.comments.mockImplementation((message: string) => {
[tuture-add] dessert.comments(message);
[tuture-add] return ['not bad'];
[tuture-add] });
[tuture-add] expect(mockedDessert.comments("cake is so good")).toEqual(['not bad']);
[tuture-add] expect(dessert.comment).toEqual(['cake is so good']);
[tuture-add] })
})

注意:我们可以更改**testtest.only仅对test.only**的测试用例执行测试,降低测试时间并关注特定测试点。

mock function

test.only("enjoy the cake with mock function", () => {  ...

这里我们通过jest.fn进行了mock function功能的展示,通过执行npm test看到.mock的结构信息:

.mock**的中将会记录mock function调用后的相关信息**。

mock return value

test("enjoy the cake with mock return value", () => {
....

这里我们通过.mockReturnValu可以将function mock的操作略过,直接会返回.mockReturnValue中填充的返回值。通过执行npm test验证。

mock module

import desserCommentModule from "../src/desserCommentModule";
jest.mock("../src/desserCommentModule");
test.only("comment the dessert with mock module", () => {
...

通过jest.mock,我们mock了甜点评论区,这项操作可以使我们对dessertCommentModule中的所有功能进行我们的测试定制。这里我们通过对评论功能进行mock return value,通过执行npm test看到:

并没有进入dessertCommentModule中的comments方法,直接返回了我们预置的返回值。

mock implementations

test.only("comment the dessert with mock implementations", () => {
...

我们通过对评论功能进行mock implementations,通过执行npm test看到:

进入了mockImplementation中的测试定制功能,并且调用了dessert中的comments方法。

参考

*https://jestjs.io/docs/en/getting-started
*

*https://www.valentinog.com/blog/jest *

https://dev.to/muhajirdev/unit-testing-with-typescript-and-jest-2gln

本文源码

https://github.com/studytoohard/jest-just-go

图雀社区 微信公众号

扫一扫关注上方公众号,拉学习群和答疑解惑

  • 本文作者: 图雀社区
  • 本文链接: https://tuture.co/2020/04/04/9e7496d/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!