使用 Visual Studio Code 调试器时如何配置 Jest 的源映射

Question

我正在使用React Native编写一个应用程序，并希望能够使用jest框架测试我的代码，并使用Visual Studio Code编辑器调试程序以设置断点。我目前遇到的问题是，无论我如何运行调试器，无论是通过生成新实例还是附加它，都似乎无法从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编译的，我不确定这是否有影响。

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

- naughty boy

---

你在此期间找到解决方案了吗？ - nico1510

Answer 1

.babelrc选项是单数形式的sourceMap。对我来说，{"sourceMap": "inline"}有效。

- Stephen J. Collings

---

我也可以。 - alexche8

Answer 2

我已经成功地让 VS Code 在 Jest + Babel 中正确生成源映射和断点位置，而不是转译后的文件。

1. 确保 Babel 生成 sourceMaps。在我的 package.json 的 babel 部分中设置 sourceMap 为 inline（你可能需要在你的 .babelrc.json 中设置）。

2. 在我的 VS Code 的 launch.json 文件中，我将 debugger 从 node 替换为 pwa-node。这使我能够指定 resolveSourceMapLocations 属性，并告诉 VS Code 源文件在我的工作区目录中。我认为这是必要的，因为 Jest 在其自己的缓存中构建文件。

我的完整的 launch.json 配置：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "vscode-jest-tests",
            "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
            "args": [
                "--no-cache",
                "--config",
                "${workspaceRoot}/jest.config.json",
                "--runInBand",
                "--detectOpenHandles"
            ],
            "internalConsoleOptions": "neverOpen",
            "outFiles": [
                "${workspaceRoot}/dist/**/*"
            ],
            "env": {
                "NODE_ENV": "test"
            },
            "runtimeArgs": [
                "--nolazy"
            ],
            "console": "integratedTerminal",
            "sourceMaps": true,
            "smartStep": true, 
            "skipFiles": [
                "<node_internals>/**",
                "node_modules/**"
            ],
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ],
        }
    ]
}

我正在使用VS Code 1.53和Jest 25.5.4

- Alex Culea

Answer 3

你的jest配置是什么？在我添加了以下配置值之前，我看到了与覆盖率相关的奇怪转换输出：

"testRegex": "src/.*\\.test\\.js$"

- M. Herold