一杯茶的时间,上手 Jest 测试框架
2020/4/9 11:01:21
本文主要是介绍一杯茶的时间,上手 Jest 测试框架,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
如果您觉得我们写得还不错,记得 点赞 + 关注 + 评论 三连,鼓励我们写出更好的教程💪
当我第一次听说TDD(Test-Driven Develop, 测试驱动开发)的时候,我首先想到的是测试小姐姐们想搞事情?后面发现这个玩意儿是想干掉测试,那好,下面开始让我们干掉这群整天给我们找bug...下面开始从简单的单元测试上手Jest测试框架。
我们能学到什么
本文所涉及的源代码都放在了 Github 上,如果您觉得我们写得还不错,希望您能给❤️这篇文章点赞+Github仓库加星❤️哦
项目初始化
创建工程
# 注意powershell中'&&'替换为';' mkdir jest-just-go && cd jest-just-go 复制代码
初始化
npm init -y 复制代码
安装依赖
npm i jest --save-dev 复制代码
1.Jest怎么4行代码完成一个测试用例
初始化Jest默认配置
npx jest --init 复制代码
编写功能代码
现在让我们正式开始,茶和图雀社区精心准备的甜品更搭哦。
在项目根目录下新建src
目录,存放我们的功能代码。然后创建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
。
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"); }) }) 复制代码
简单的四行代码,我们的第一个测试用例就已经大功告成。这里我们只需要注意 describe
、test
、expect
这3个 Jest
关键字就行了:
describe
:组合同一类的test
用例,可以添加beforeEach \ afterEach、beforeAll \ afterAll
(这里由于篇幅,这一类进阶特性将放在后续的教程中)为其下所有test
进行统一描述和处理。test
:描述具体的测试用例,是单元测试的最小单元。expect
:Jest
最终落在了每一个对测试结果的 期望 上,通过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%开始。
编写功能代码
甜点不够怎么办?要不我们开家店吧!先让红豆烧和提拉米苏够吃先~
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-jest
为 Jest
+ Typescript
环境下进行测试提供了类型检查支持和预处理。
ts初始化
在根目录下创建配置文件tsconfig.json
:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "lib": [ "es2015" ], "strict": true, "declaration": true, "outDir": "build", "sourceMap": true }, "include": [ "src/**/*" ], "exclude": [ "node_modules", "__test__/**/*" ] } 复制代码
修改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.js => src/dessert.ts
export default class dessert { name: string; constructor(name: string) { this.name = name; } enjoy() { return "Enjoy the " + this.name; } } 复制代码
src/dessertFactory.js => src/dessertFactory.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.js => __tests__/dessert.ts
import dessert from "../src/dessert"; describe("test dessert feature", () => { test("enjoy the cake", () => { const cake = new dessert('cake'); expect(cake.enjoy()).toBe("Enjoy the cake"); }) }) 复制代码
__tests__/dessertFactory.js => __tests__/dessertFactory.ts
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"); expect(dessertFactoty.produce(dessertType[1]).enjoy()).toBe("Enjoy the Tiramisu"); expect(() => { dessertFactoty.produce('Luckin Coffee') }).toThrow("please choose a dessert type"); }) }) 复制代码
如同代码重构后我们通过测试用例可以快速检查是否改动出现差错一样,我们这次变更可以执行 Jest
测试命令,检查是否对功能无影响。
4.Jest最锋利的功能 Mock Functions
关于 Jest
测试框架中的Mock功能,我们主要关注两点:
mock function
: 对函数进行mock.mock return value
: 对返回值进行mock.
从以上两点可以衍生出 Jest
对于代码单元测试中两项常用的锋利功能:
- 对功能中业务逻辑简化后的重新实现,方便有指向性的进行测试(比如忽略实际场景中的跨服务调用功能等,仅需将原有功能中对应的调用逻辑改为定义的测试数据即可)。
- 对功能返回值的直接模拟。
为甜点增加了评论功能:
export default class dessert { name: string; static comment: string[] = []; constructor(name: string) { this.name = name; } enjoy() { return "Enjoy the " + this.name; } static comments(message: string) { dessert.comment.push(message); } } 复制代码
专门建立一个互动区进行甜点的讨论。创建src/dessertCommentModule.ts
:
import dessert from "./dessert"; module dessertCommentModule { export function comments(message: string) { dessert.comments(message); return dessert.comment; } } export default dessertCommentModule; 复制代码
下面开始test dessert feature with mock
~这一部分均已通过测试,建议深入研读代码,感受 Jest mock
每一处的奥妙。如果下面各处期望的结果都如你所料,那么你就是图雀社区最靓的仔:
import dessert from "../src/dessert"; import dessertCommentModule from "../src/dessertCommentModule"; jest.mock("../src/dessertCommentModule"); describe("test dessert feature", () => { test("enjoy the cake", () => { const cake = new dessert('cake'); expect(cake.enjoy()).toBe("Enjoy the cake"); }) }) describe("test dessert feature with mock", () => { test("enjoy the cake with mock function", () => { const dessertFactoryMock = jest.fn(name => new dessert(name)); const cake = dessertFactoryMock('cake'); expect(cake.enjoy()).toBe("Enjoy the cake"); expect(dessertFactoryMock.mock.results[0].value.enjoy()).toBe("Enjoy the cake"); console.log(dessertFactoryMock.mock); }) test("enjoy the cake with mock return value", () => { const dessertFactoryMock = jest.fn(name => new dessert(name)); const cake = new dessert('cake'); dessertFactoryMock.mockReturnValue(cake); const tiramisu = dessertFactoryMock('tiramisu'); expect(tiramisu.enjoy()).toBe("Enjoy the cake"); expect(tiramisu).toEqual(cake); expect(dessertFactoryMock.mock.results[0].value).toEqual(cake); }) test("comment the dessert with mock module", () => { const mockedDessert = dessertCommentModule as jest.Mocked<typeof dessertCommentModule>; mockedDessert.comments.mockReturnValue(['not bad']); expect(mockedDessert.comments("cake is so good")).toEqual(['not bad']); expect(dessert.comment).toEqual([]); }) test("comment the dessert with mock implementations", () => { const mockedDessert = dessertCommentModule as jest.Mocked<typeof dessertCommentModule>; mockedDessert.comments.mockImplementation((message: string) => { dessert.comments(message); return ['not bad']; }); expect(mockedDessert.comments("cake is so good")).toEqual(['not bad']); expect(dessert.comment).toEqual(['cake is so good']); }) }) 复制代码
mock function
注意:我们可以更改test
为test.only
仅对test.only
的测试用例执行测试,降低测试时间并关注特定测试点。
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 dessertCommentModule from "../src/dessertCommentModule"; jest.mock("../src/dessertCommentModule"); 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
想要学习更多精彩的实战技术教程?来图雀社区逛逛吧。
本文所涉及的源代码都放在了 Github 上,如果您觉得我们写得还不错,希望您能给❤️这篇文章点赞+Github仓库加星❤️哦
这篇关于一杯茶的时间,上手 Jest 测试框架的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-28中外程序员到底有啥区别?
- 2024-05-25外企也半夜发布上线吗?
- 2024-05-24鸿蒙原生应用再新丁!芒果TV 入局鸿蒙
- 2024-05-22基本概念
- 2024-05-22检索数据
- 2024-05-22排序数据
- 2024-05-22基础过滤数据
- 2024-05-22通过逻辑操作符过滤数据
- 2024-05-22通过通配符过滤数据
- 2024-05-22字段的拼接与计算