如何使用代码图调试笑话测试答案

【问题标题】：How to debug jest test with code maps如何使用代码图调试笑话测试
【发布时间】：2016-02-01 14:55:45
【问题描述】：

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

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

【问题讨论】：

标签： javascript jestjs

【解决方案1】：

这个问题已经很老了，已经发生了很大的变化。有关导致解决方案的最近 Jest 调试冒险，请阅读我的帖子：

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

简而言之就是这样：

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

我使用了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 和单元测试中设置断点。

【讨论】：