• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Haixiang
V2EX  ›  程序员

写了一本开源小书《Jest 实践指南》

  Haixiang ·
haixiangyan · May 20, 2022 · 6261 views
This topic created in 1629 days ago, the information mentioned may be changed or developed.

哈喽,大家好,我是海怪。

前段时间一直在给公司项目引入 Jest ,这过程中学到了不少东西,也查了很多相关资料。最后编写了一本小书《 Jest 实践指南》, 希望能帮助到想了解和学习前端测试的朋友。

测试难点

Jest 看似很简单,就像很多博客写的那样:

expect(sum(1, 1)).toEqual(2)

然而在真实业务中,写出一个好测试的难度并不低。我总结了一下写测试的几个难点:

不会配置。 Jest 的上手文档非常简单,甚至不需要配置。但真实情况是只要一个配置没配好,所有测试都跑不起来。测试不像开发,代码有问题可以慢慢调, 而是一个 0 - 1 游戏,不是成功就是失败,挫败感非常强。

不知道要怎么 Mock 。 这个绝对是经典中的经典。虽然官方文档有教程,但是真实的业务往往不是那么理想,远比文档要复杂得多。

不会构造测试用例。 刚接触测试时,很容易把做业务那套 “实现 XXX 功能” 的想法代入测试。但测试的重点不在于实现功能,而是构造用例。

没有测试策略。 上面是 “技” 的难点,测试还有 “术” 的难点。闷着头肝测试并不高效,使用合适的测试策略远比写 10 个测试用例重要。

上面这些问题很容易让人写出难以维护和复杂的测试。只要业务一改,不仅要维护业务代码还要维护测试代码。 这时,你不禁感叹:“测试真浪费时间”,最终放弃写测试,直接开摆。

好的测试会让你获得很高的代码信心,而不好的测试则会严重拖垮项目开发。所以,大家所厌恶的不应该是测试本身,而是那些维护性差的测试。

社区现状

目前国内关于前端测试的内容非常糟糕,在我查找资料过程中就没有一次是不坎坷的。首先是 Jest 的官网就不给力:

先不说翻译的正确性如何,单看这中文的内容就让人没有想看下去的欲望,真希望 Jest 能找稍微专业一点的人来做翻译。 由于官网的中文翻译做的实在太烂,遇到问题几乎在中文社区是找不到的。

再来说国内关于测试的文章,我总结有三类:

  1. 入门类。 安装 Jest ,外加 expect(1 + 1).toEqual(2) 小例子
  2. API 说明书类。 类似于把 Jest 官网抄了一遍
  3. 理论类。 详细说了测试是什么、为什么、测试理论等,但最重要的 “怎么做” 没有说

不是说这些文章不好,只是这些文章大多数停留在最初级,看完还是不会怎么写测试。就现状来看国内测试社区是有进步的,至少有不少人在写第三类了,要知道以前基本只有第一类文章。

教程诞生

终于,我看到了 React Testing Library 作者 Kent C. Dodds 的 博客 。

他写了很多关于测试思路的文章,每一篇都非常精彩。受他的启发,我觉得有必要把这些思想和技巧分享出来,最终形成了这本小书。这本小书要解决的就是 “怎么做” 这一步。

内容

此次教程主要分享测试的思路为主,虽然以 React 为主要技术栈,但使用其它技术栈的读者依然可以流畅阅读。

本教程是我结合了自身实践、Kent C. Dodds 文章、StackOverflow 、Github Issue 以及别的博客最终总结出来的一套实践指南。

小书包含 3 部分:

  • 基础实践。 从 0 到 1 写项目和测试,每一章会通过一个业务例子来分享测试难点、解法和思路。
  • 配套项目。 如果你在某一步卡壳了,也可以参考这个项目。
  • 测试思路。 分享一些 Kent 的文章(中文翻译)以及测试总结。

最后

我知道很多人看到这个贴子依然对测试嗤之以鼻,可能觉得写测试就是扯淡、浪费时间的,也可能你已经对国内的 “短平快” 失望了,这个我完全能理解。

但我相信总有人愿意写测试的,我希望在他们学习如何写测试时能给一个方向和引导。

51 replies  •  2022-05-27 16:21:20 +08:00
snoopyhai
snoopyhai
May 20, 2022
1
太好了, 感谢
yaphets666
yaphets666
May 20, 2022
2
点赞,前端测试方面的资料真的蛮匮乏的
wxrbw555
wxrbw555
May 20, 2022
3
目测 08 粉丝
Haixiang
Haixiang
OP
May 20, 2022
4
@wxrbw555 哇靠,不会说的是红警那个吧!哈哈,广快肥房
Kaier
Kaier
May 20, 2022
5
star 了
wequart
wequart
May 20, 2022
6
棒!!
wxrbw555
wxrbw555
May 20, 2022
7
@Haixiang 搞点花里胡哨,受不了了直接投翔,哈哈
lneoi
lneoi
May 20, 2022
8
借楼问个问题, 之前测试 cli 工具, 想测试传入参数是否按预期走到正常逻辑内, 但内部是直接调用 process.argv 获取参数的, 没找到模拟方案, 这个场景要如何写测试用例呢?
yunyuyuan
yunyuyuan
May 20, 2022
9
🐂,先 star 了,测试这块接触的不多
cburt
cburt
May 20, 2022
10
太棒了!!!已 star
Ccbeango
Ccbeango
May 20, 2022
11
强!
Haixiang
Haixiang
OP
May 20, 2022
12
@wxrbw555 你是怎么看出是 08 粉的?文章里有些话很想用“受不了直接投降”,一直控制住自己 08 化,怕大家不知道这个梗,哈哈
Haixiang
Haixiang
OP
May 20, 2022
13
@lneoi Mock process.argv 属性:Object.defineProperty(process, 'argv', { value: xxx })
Haixiang
Haixiang
OP
May 20, 2022
14
@cburt 感谢支持~
Haixiang
Haixiang
OP
May 20, 2022
15
@yaphets666 是的呢,感谢支持~
lneoi
lneoi
May 20, 2022
16
@Haixiang 看着是重写参数了, 谢了, 我之后试试
a90120411
a90120411
May 20, 2022
17
粗读了一下,感觉很工整,支持一下!
palxie
palxie
May 20, 2022
18
牛, 以前做 test 时, jest 啃了好久, 现在一定好好看看
dany813
dany813
May 20, 2022
19
收藏
a4854857
a4854857
May 20, 2022
20
谢谢!
Terry05
Terry05
May 20, 2022
21
很棒的书!
varzy
varzy
May 20, 2022
22
正好需要,感谢分享!
huajieyu
huajieyu
May 20, 2022
23
感谢分享
s5s5
s5s5
May 20, 2022
24
非常感谢,楼主辛苦了,Star 送上
Haixiang
Haixiang
OP
May 20, 2022
25
@palxie 嘻嘻,谢谢支持~
Haixiang
Haixiang
OP
May 20, 2022
26
@s5s5 感谢支持~~~
Haixiang
Haixiang
OP
May 20, 2022
27
@a90120411 记得五星好评哦
Hilong
Hilong
May 20, 2022
28
点赞👍
s5s5
s5s5
May 20, 2022
29
@Haixiang 你个人网站有些链接错了,报告到你的 me 项目的 issues 里了
hamsterbase
hamsterbase
May 20, 2022❤️1
30
可以试试看 vitest 。

1. API 和 jest 几乎一样,迁移不需要改原先的代码
2. 自带 ts 支持,不需要 ts-jest
3. 速度快好几倍
v23xowen
v23xowen
May 20, 2022
31
支持~
yazoox
yazoox
May 20, 2022
32
@hamsterbase 这么牛 B 么?支持度怎么样?不会过几年没有维护吧?
jest 好像是 facebook 支持的?
hamsterbase
hamsterbase
May 20, 2022 via iPhone
33
@yazoox facebook 不想维护已经跑路了

vitest 是 vue 社区维护的。
wxrbw555
wxrbw555
May 20, 2022
34
“这里我们还不忘搞点花里胡哨,引入了 src/components/AuthButton/styles.less:”
“好,现在我们一个一个问题来看。写完上面的代码后,TS 首先受不了报错:”

这两句话在"Less 的引入问题"附近,太像了😂
liugezhou
liugezhou
May 20, 2022
35
先码后看,最近也是在搞 jest
zhw2590582
zhw2590582
May 20, 2022 via iPhone
36
一旦涉及到 dom 的,都不好写测试用例
Haixiang
Haixiang
OP
May 20, 2022
37
@s5s5 感谢~ thx
Haixiang
Haixiang
OP
May 20, 2022
38
@hamsterbase 可以,可以尝试点新的
Haixiang
Haixiang
OP
May 20, 2022
39
@wxrbw555 你们是要笑死我,到底从哪看出我是 08 粉的,哈哈哈哈
Haixiang
Haixiang
OP
May 20, 2022
40
@zhw2590582 对的,最好用更贴近用户的真实行为来做测试
Haixiang
Haixiang
OP
May 20, 2022
41
@wxrbw555 哈哈哈哈,看到了,真的 08 化了
morize
morize
May 20, 2022
42
上个月一直在做这方面,真实业务场景要把单测跑起来就要先构造海量的数据。业务逻辑纯 js 还算简单。但涉及到视图层,尤其是复杂的组件,真的没动力,并不能感到带来代码质量提升,反而如果为了测试要破坏原有的代码结构,得不偿失,不如不做。
Haixiang
Haixiang
OP
May 21, 2022
43
@morize 如果是太复杂与业务联动太高的业务,那不应该做单测,而是集成。单测在业务中不太常用,原因是单测比较关注逻辑和数据,造数据和关注逻辑又是一个很痛苦的过程,而集成偏向于关注交互。当然,如果写测试的成本大于测试带来的收益,也可以不做。
tonytonychopper
tonytonychopper
May 21, 2022
44
支持,正好缺这方面的资料,感谢!
Loserzhu
Loserzhu
May 21, 2022
45
感谢分享
reiji
reiji
May 21, 2022
46
感谢!我也一直不知道如何很好的写测试,学习一下
Haixiang
Haixiang
OP
May 21, 2022
47
@reiji 冲鸭!
lfr502
lfr502
May 21, 2022
48
cool
aaronlam
aaronlam
May 25, 2022
49
在短平快的业务开发下,的确很少接触到单测,先学习一波
reiji
reiji
May 27, 2022
50
@Haixiang 学习了两天,收获特别多,非常感谢作者
Haixiang
Haixiang
OP
May 27, 2022
51
@reiji 感谢支持~
About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5214 Online   Highest 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 159ms · UTC 02:52 · PVG 10:52 · LAX 18:52 · JFK 21:52
♥ Do have faith in what you're doing.