debugging - 在 Visual Studio Code 调试器中使用 Jest 时如何配置源映射

Question

我正在使用 React Native 编写一个应用程序，我希望能够使用 jest 框架测试我的代码，并使用 Visual Studio 代码编辑器调试器设置断点。我目前遇到的问题是，无论我如何运行调试器，无论是通过生成新实例还是附加它，我似乎都无法让源映射从 babel 工作。我在 .babelrc 文件中尝试了多种配置，但似乎都不起作用。

VScode 版本 - 1.6.0(最新)

我的目录结构类似于此

-package.json
-node_modules
-.babelrc
-dist
-app
 -myModule.js
 -test
   -myModule.spec.js

然后在我的 .babelrc 中我有以下内容

{
    "presets" : ["react-native"],
    "sourceMaps" : true,
    "outDir" : "./dist"
}

我尝试将 sourceMaps 属性设置为 true 和 inline，但两者都不适用于当前的 launch.json 配置。

这是我用于运行 Jest 测试器的 launch.json

{

            "name" : "Launch via jest",
            "type": "node",
            "request": "launch",
            "program" : "${workspaceRoot}/node_modules/jest/bin/jest.js",
            "cwd": "${workspaceRoot}",
            "args": [
                "--runInBand"
            ],
            "runtimeArgs": [
                "--harmony"
            ],
            "sourceMaps": true,
            "outDir" : "${workspaceRoot}/dist"
}

--harmony 和 --runInBand 都是使调试器正常工作所必需的，因为 Jest 将生成一个与端口冲突的子进程。

我的 package.json 中还有其他 Jest 配置

"jest": {
    "preset": "jest-react-native"
  }

现在，每当我运行调试器时，它都会运行并停在 babel 输出的断点处，而不是停在原始源代码处，这没有多大帮助。我还应该提到的是，测试本身是由 babel 编译的，我不确定它是否重要。

欢迎任何指针或不同的配置。

Answer 1

.babelrc 选项是 sourceMap 单数。 { "sourceMap": "inline"} 对我有用。