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

arknldoa 于 2023-03-19 发布在 Jest

关注(0)|答案(3)|浏览(310)

我正在使用React Native编写一个应用程序，我希望能够使用Jest框架测试我的代码，并使用Visual Studio代码编辑器调试器设置断点。我目前遇到的问题是，无论我如何运行调试器，无论是通过生成新示例还是附加它，我似乎不能从babel得到源代码Map。我尝试了在.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编译的，我不确定这是否重要。
任何指针或不同的配置都是受欢迎的。

debugging

来源：https://stackoverflow.com/questions/40003070/how-to-configure-source-maps-when-using-jest-within-visual-studio-code-debugger

3条答案

按热度按时间

f0ofjuux1#

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

赞(0）回复(0）举报 2023-03-19

eagi6jfj2#

我已经能够得到VS代码正确的源代码Map和断点放置在源文件中，而不是传播与Jest + Babel的工作：
1.确保Babel生成sourceMap，这是通过在我的package.json的babel部分中将sourceMap设置为inline（您可能需要在您的.babelrc.json中执行此操作）。
1.在我的VS代码launch.json文件中，我将debugger从node替换为pwa-node。这允许我指定resolveSourceMapLocations属性，并向VS代码指示源文件在我的工作区目录中。我认为这是必要的，因为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代码1.53，Jest 25.5.4

赞(0）回复(0）举报 2023-03-19

brgchamk3#

你的jest配置是什么？我看到了奇怪的覆盖输出，直到我添加了以下配置值：
"testRegex": "src/.*\\.test\\.js$"

赞(0）回复(0）举报 2023-03-19