在 ts + Jest 单元测试中 debugging

本文简要介绍了如何在 Jest 单元测试中利用 Chrome Node DevTools 来辅助调试

1、背景

  • 代码是 TS 写的
  • 所测功能无 UI 界面,且出现 bug 初步定位到是循环体内部问题,功能较为复杂
  • 用 console 式 debug 效率太低,需要打断点式调试

在 Jest 单测中进行 debugger 目前有两种方法:1. VSCode 提供的 Debugger 功能; 2. Chrome Node DevTools

刚开始我用 VSCode 的 Debugger 功能,在 TS 源码进行 debugger 时候,发现在源码上打断点无法准确定位:

在 ts + Jest 单元测试中 debugging_第1张图片

遂采用 Chrome Node DevTools 调试方法,主要是参考 调试Jest 这篇文章来进行设置。

2、步骤

  1. 在认为可能失败并输入的测试中插入一个 debugger。这将作为断点
  2. 打开 Chrome 并输入地址栏:chrome://inspect
  3. 点击 Open dedicated DevTools for Node会弹出一个单独的 devtools 窗口,前端同学最熟悉不过了:

在 ts + Jest 单元测试中 debugging_第2张图片

  1. 执行命令 node --inspect node_modules/.bin/jest --runInBand
--runInBand 选项,表示仅在当前的进程中连续运行所有测试,而非通过创建的子进程的工作池来运行测试。Jest运行测试用例的特点是多进程并发运行不同测试案例,达到快速的效果。但是这样对调试来说是没法进行的。这个参数保证了使用一个进程运行所有代码。

接下来就可以开心的 debug 了:

在 ts + Jest 单元测试中 debugging_第3张图片

3、总结

  1. 如果功能代码是 js 写的,推荐直接用 VSCode 提供的 Debugger 功能来调试会比较方便(具体设置请看下方的 ”参考文章“);
  2. 如果代码是 TS 写的,或者设计的逻辑较为复杂,还是推荐使用 Chrome Node DevTools 方式调试,用起来比较顺手
  3. 当然,有自己喜爱的调试方式,请忽略上述两条

附:参考文章

  • 调试Jest:简要总结了用 Chrome 调试和 VSCode 调试,本文所用的 Chrome 调试 就是通过这篇文章学会的
  • debugging-jest-tests:微软官方仓库中给出的 VScode 中 launch.json 的配置项教程,涵盖了 debug 全部测试文件debug 单个测试文件 这两种场景,足够了
  • Debugging TypeScript Jest Tests With Visual Studio Code:文中给出针对 ts + jest 的 launch.json 的配置项,可以借鉴一下
  • 使用jest+enzyme进行react项目测试 - debug篇:虽说是 2017 年的文章,仍旧有可借鉴性
  • Debugging with TypeScript, Jest, ts-jest and Visual Studio Code:对新手友好的单元测试 debugger 入门文章,一步步教你;

以下是我的公众号,会时常更新 JS(Node.js) 知识和资讯,欢迎扫码关注交流。
在 ts + Jest 单元测试中 debugging_第4张图片

你可能感兴趣的:(javascript,jest,debug,chrome-devtools)