Jest的VSCode插件

2021-09-10大约7分钟

VSCode的扩展里面有不少很好的Jest插件。在VSCode的扩展里面搜jest,就会看到安装下载最多的那些插件。比如:

图片

这些插件里面,尤其是前两个值得考虑一用。

Jest

这个是Facebook官方的插件,功能最强大,有这些功能:

  • 打开项目时,Jest会自动跑所有的测试。
  • 内联显示单个失败/通过。
  • 在问题检查器中显示失败的测试。
  • 突出显示expect函数旁边的错误。
  • 为快照文件添加语法高亮。
  • 失败快照的一键更新。
  • 在被测试的文件中显示覆盖率信息。
  • 帮助调试 VSCode 中的 jest 测试。
  • 支持多种试运行模式(自动、手动、混合onSave),满足用户偏好的开发体验。
  • 跟踪并显示整体工作区/项目测试统计信息

一般情况下,Jest扩展是个非常理想的工具,大部分时候,都可以做到:一个插件在手,别的插件不瞅!

但是这个扩展的缺点呢,可能太强大也导致太笨重,尤其是打开项目自动就跑测试,导致硬件配置稍微差点的电脑容易感觉卡顿。另外,不太容易跑单个测试或者debug单个测试,每次跑都是全量跑测试。

如果有这种场景,可以考虑把自动测试的功能通过插件的配置关掉,或者考虑更轻量的插件:Jest Runner。

Jest Runner

Jest Runner重点把功能放到了执行/调试单个测试上,因此,可以很简单地就满足跑全部测试或任意选单个测试跑这个核心的功能上,没有Jest扩展那些花里胡哨的功能。因此,使用场景简单的话,这也是一个非常顺手的工具。

如果需要替换失败的快照文件的话,jest测试框架自身就有这样的功能,在npm test后面加上-u参数就可以了,所以这点不用担心。