在 Visual Studio Code 调试器中使用 Jest 时如何配置源映射 [英] How to configure source maps when using Jest within Visual Studio Code debugger

问题描述

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

I am writing an app using react native and I want to be able to test my code using the jest framework and use the visual studio code editor debugger to set breakpoints. The problem I am currently having is no matter how I run the debugger, whether it is through spawning a new instance or attaching it, I can't seem to get the source maps to work from babel. I have tried a variation of configurations within the .babelrc file but none seem to work.

VScode 版本 - 1.6.0(最新)

VScode version - 1.6.0(latest)

我的目录结构类似于这个

My directory structure resembles this

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

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

then in my .babelrc I have the following

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

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

I have tried setting the sourceMaps prop to both true and inline and both did not work with current launch.json configuration.

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

Here is my launch.json for running the Jest tester

{

            "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 会产生一个与端口冲突的子进程.

Both --harmony and --runInBand are necessary to get the debugger working properly since Jest will spawn a child process which conflicts with the ports.

我的 package.json 中还有额外的 Jest 配置

I also have additional Jest configuration within my package.json

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

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

Now whenever I run the debugger, It runs and it stops at the babel output's breakpoints instead of the original source which doesn't help much. I should also mention that the test itself is compiled by babel which I am unsure if it matters.

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

Any pointers or different configurations are all welcomed.

推荐答案

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

The .babelrc option is sourceMap singular. { "sourceMap" : "inline" } works for me.

这篇关于在 Visual Studio Code 调试器中使用 Jest 时如何配置源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！