javascript - 如何使用代码图调试 Jest 测试

Question

我手上的 javascript Jest 测试失败了，所以我使用了通常的东西来调试: 节点调试 --nodejs --harmony ./node_modules/jest-cli/bin/jest.js --runInBand

所以，它实际上是有效的，但是由于幕后所有的 babel-jest 黑魔法，我无法看到原始代码并让调试器正确地浏览它。我只得到我们都讨厌的那些可怕的俏皮话之一，或者有时会卡在调试器中的调用函数中(尝试过 chrome 开发工具和 Visual Studio 代码)。 那么，有没有办法生成可用的js映射并用它来调试jest测试呢？ 我是否必须仅通过观察调用堆栈并猜测我在代码段中的位置来进行导航？

Answer 1

这个问题已经很老了，已经发生了很大的变化。有关最近的 Jest 调试冒险并得出解决方案，请阅读我的文章:

Debugging Jest unit tests with breakpoints in VS Code with React Native

简而言之，可以归结为:

1. 暂时不要使用 NodeJS v8.*!这是主要问题。 inspector 协议(protocol)尚未做好生产准备。
   • 我从 8.1.2 降级到 7.10.1
2. 我使用 Ignite CLI 使用默认的 ignite-ir-boilerplate 引导项目
   • 但是，如果不使用 React Native 或有不同的偏好，您可以使用任何您想要的样板。大多数样板默认生成源映射。

3. 我使用了 Visual Studio Code 调试器 v1.13.1，然后设置了以下配置:

   {
       "type": "node",
       "request": "launch",
       "name": "Launch Tests",
       "program": "${workspaceRoot}/node_modules/.bin/jest",
       "args": [
           "--runInBand",
           "--no-cache"
       ],
       "runtimeArgs": [
           "--debug-brk=127.0.0.1:5858"
       ],
       "port": 5858
   }
   

就是这样。您可以在应用代码、node_modules 和单元测试中设置断点。