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"
}

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

我的package.json

中还有其他Jest配置

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

现在每当我运行调试器时，它都会运行，并且它会停留在babel输出的断点处，而不是原始源，这对它没什么帮助。我还应该提一下，测试本身是由babel编译的，我不确定它是否重要。

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

Answer 1

.babelrc选项为sourceMap单数。 { "sourceMap" : "inline" }适合我。

Answer 2

我已经能够在源文件中获得 VS Code 正确的源映射和断点位置，而不是通过以下方式转译为与 Jest + Babel 一起使用：

确保 Babel 生成 sourceMap，这是通过在我的 babel 的 package.json 部分将 sourceMap 设置为内联（您可能需要在您的 .babelrc.json 中执行此操作） .
在我的 VS Code launch.json 文件中，我将调试器从 node 替换为 pwa-node。这允许我指定 resolveSourceMapLocations 属性并向 VS Code 指示源文件位于我的工作区目录中。我认为这是必要的，因为 Jest 在自己的缓存中构建文件。

我的完整 lunch.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

Answer 3

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

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

如何在Visual Studio代码调试器中使用Jest时配置源映射

3 个答案: