我正在使用 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 编译的,我不确定它是否重要。
欢迎任何指针或不同的配置。
最佳答案
.babelrc 选项是 sourceMap
单数。 { "sourceMap": "inline"}
对我有用。
关于debugging - 在 Visual Studio Code 调试器中使用 Jest 时如何配置源映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40003070/