在 ts + Jest 单元测试中 debugging

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

一、背景

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

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

刚开始我用 VSCode 的 Debugger 功能，在 TS 源码进行 debugger 时候，发如今源码上打断点没法准肯定位：

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

二、步骤

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

1. 执行命令 node --inspect node_modules/.bin/jest --runInBand <path/to/testfile>

--runInBand 选项，表示仅在当前的进程中连续运行全部测试，而非经过建立的子进程的工做池来运行测试。Jest运行测试用例的特色是多进程并发运行不一样测试案例，达到快速的效果。可是这样对调试来讲是无法进行的。这个参数保证了使用一个进程运行全部代码。

接下来就能够开心的 debug 了：

三、总结

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) 知识和资讯，欢迎扫码关注交流。