[译]如何调试JEST测试？

本文翻译自liusy182

  Jest框架是facebook旗下一款单元测试框架，我个人十分喜欢它，因为它自动mock这一点十分强大。然而，当它遇到问题的时候，就会经常抛出一些模糊的调用栈信息。我在网上搜索尝试找到如何debug Jest测试的方法，却很难找到有用的信息。总之，它仍然还是一个比较新的测试框架。

  Jest使用虚拟DOM来运行测试。这一点不同于Karma和Jasmine（它们是利用浏览器来运行测试的）。我觉得这就会给它带来一个很大的缺点：不能使用浏览器上的调试工具来调试Jest的测试。因此，我们需要借助于Node/V8引擎自带的调试器。Node默认的调试器是完全基于命令行形式的，类似于GDB - 虽然我从来就不是一个命令行调试的拥簇，但先还是解决这个问题吧。

<!--more-->

首次尝试

  要调试(debug)一个Jest测试，比如说“myView-test.js”，我们需要使用如下的node指令来实现：

node debug --harmony .\node_modules\jest-cli\bin\jest.js --runInBand myView-test.js

  接下来让我来解释一下我们这里到底做了什么：

• "node debug"将会启动node自带的调试器。“debug”会调用一个V8引擎调试器的wrapper。这个wrapper提供了一系列的指令，用于在代码中跳进跳出和跟踪，而这些指令都不会出现在V8的“node -debug”中。（我承认它们看起来很相似，一个“-”符号之差）
• "-harmony"标志是为了让Jest正确地运行。更多关于harmony的信息可以戳这里。
• “.\node_modules\jest-cli\bin\jest.js”就是Jest的入口。这个文件会在我调用“\node_modules.bin”里的“Jest”时被调用。
• "-runInBand"告诉Jest在当前的进程中运行所有测试，而不是再启动一个进程。Jest默认就会启动多个进程并行的运行测试。如下为源码中关于这个选项的描述的片段（在.\node_modules\jest-cli\bin\jest.js中）:

'Run all tests serially in the current process (rather than creating a worker pool of child processes that run tests). This is sometimes useful for debugging, but such use cases are pretty rare.'
---
'在当前的进程中顺序地运行所有测试（而不是创建一个包含诸多子进程的进程池来运行测试）。这便于调试，但是使用它的场景确实挺少的。'

• “myView-test.js”就是我们想要debug的测试文件。像这样使用相对路径是没有问题的，因为Jest会把它转换为一段正则表达式。

  一旦启动了调试器，我们就可以看到调试器会在jest.cs的第一行就暂停了。可以使用Node调试器支持的API来跟踪代码。或者也可以在测试中添加断点:

debug> sb('C:\\example\\reactApp\\__tests__\\myView-test.js', 1)

  Node调试器提供了一系列的有用指令：

cont, c - 继续执行
next, n - 跳到下一步
step, s - 跳进
out, o - 跳出
pause - 暂停执行的代码 (就像开发工具中的暂停按钮)

setBreakpoint(), sb() - 在当前行设置断点
setBreakpoint(line), sb(line) - 特定行设置断点
setBreakpoint('fn()'), sb(...) - 在函数体内的第一段声明中设置断点
setBreakpoint('script.js', 1), sb(...) - 在script.js的第一行设置断点
clearBreakpoint, cb(...) - 清楚断点

backtrace, bt - 打印当前执行帧的回溯
list(5) - 列出脚本源代码的5行内容（前面和后面5行）
watch(expr) - 向观察列表中添加表达式
unwatch(expr) - 去掉观察列表中的表达式
watchers - 列出所有的watcher以及它们的值（在每段断点处自动列出）
repl - 在调试脚本的内容时打开调试器的repl用于评估

run - 运行脚本（在调试开始时自动运行）
restart - 重启脚本
kill - 结束脚本

使用WebStorm 9

  因为我从来都不是命令行debugger的拥簇，所以使用Node的调试器我很快就会迷失了。我开始思考在怎么把Jest的调试工作集成到像WebStorm 9这样强大的IDE中。

  就从这里开始，使用WebStorm我需要应付两个问题：

1. 没办法直接使用“node debug”.
2. WebStorm并没有对Jest的直接支持（尽管它支持Karma和Mocha...）

  我最终还是解决了这个问题，那就是搭建一个针对Node的调试配置项，但是把它用作于Jest测试调试。WebStorm会在它尝试调试Node的时候自动加上V8的标志"-debug"。我们只需要配置好它，就可以调试我们想要调试的JS测试。

  下面就是具体的步骤:

1. 点击菜单“Run – Edit Configurations…”
2. 添加一个新的“Node.js”配置并且像下面这样填写对应的配置项：
3. 保存并关闭对话窗口。在编辑器内里面任意地方添加断点
4. 点击菜单中“Run – Debug…”并且选择我们刚刚保存的配置。这会启动一个调试的shell来运行这些测试。并且它最终会停到我们设置的断点处。
5. 现在，我们可以使用WebStorm的调试器（出现在IDE的底部）来调试Jest测试啦！