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

How to debug jest test with code maps

我遇到了一个失败的 javascript jest 测试,所以,我使用了常用的东西来调试: 节点调试 --nodejs --harmony ./node_modules/jest-cli/bin/jest.js --runInBand

因此,它确实有效,但由于所有 babel-jest 黑魔法都在幕后进行,我无法看到原始代码并让调试器正确地浏览它。我只得到了我们都讨厌的那些可怕的单行代码之一,或者有时会卡在调试器的调用函数中(尝试了 chrome 开发工具和 visual studio 代码)。 那么,有没有办法生成一个可用的js映射,并用它来调试jest测试呢? 我是否只需要通过查看调用堆栈并猜测我在我的代码段中的位置来导航?

这个问题已经很老了,变化太大了。对于最近导致解决方案的 Jest 调试冒险,请阅读我的 post:

简而言之就是:

  1. 使用NodeJS v8.*!这是主要问题。 inspector 协议未准备好生产。
    • 我从8.1.2降级到7.10.1
  2. 我使用 Ignite CLI bootstrap 使用默认 ignite-ir-boilerplate 的项目
    • 但如果不使用 React Native 或有不同的偏好,您可以使用任何样板。大多数样板文件默认生成源映射。
  3. 我使用了Visual Studio代码调试器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 和单元测试中设置断点。