Android 使用React Native在VS代码中调试带断点的Jest单元测试

我使用流行的

v2.0.0

和创建了一个React原生项目。 然后我用一堆nodejs垫片装饰它，因为我将有一些基于节点的依赖项。 一切正常，我可以从命令行运行Jest测试。到目前为止，一切顺利

然而，现在我的单元测试之一是超时。这可能是由于调用模拟节点函数的异步调用失败所致。但是没有关于错误、位置等的信息

所以我想使用VisualStudioCodev1.13.1进行调试，问题就从这里开始了。我一辈子都不知道如何配置它，这样我就可以在测试中设置断点，就像在应用程序代码+

节点\u模块中一样

我已经安装了React本机工具
v0.3.2
，可以使用默认的
Debug Android
配置启动调试器：

[vscode-react-native] Finished executing: adb -s emulator-5554 shell am broadcast -a "com.myexample.RELOAD_APP_ACTION" --ez jsproxy true
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugger worker loaded runtime on port 13746
Running application "MyApplication" with appParams: {"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

    {
        "type": "node",
        "request": "launch",
        "name": "Launch Tests",
        "program": "${workspaceRoot}/node_modules/.bin/jest",
        "args": [
            "--runInBand",
            "--no-cache"
        ],
        "runtimeArgs": [
            "--debug-brk=127.0.0.1:5858"
        ],
        "port": 5858
    }

但是没有遇到断点。VS说：
断点被忽略，因为未找到生成的代码（源代码映射问题？。
（顺便说一句：
index.android.bundle
和
index.android.map
都是在
.vscode/.react
中生成的）。
而且我也看不到通过测试代码进行调试的方法（它位于
${projectRoot}/Tests
）

基于大量的谷歌搜索，我创建了另一个调试配置，用于在VS代码中运行Jest：

    {
        "type": "node",
        "request": "launch",
        "name": "Jest Tests",
        "program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
        "args": [
            "--config",
            "package.json",
            "--runInBand",
            "--verbose",
            "--no-cache",
            "-u"
        ],
        "runtimeArgs": [
            "--nolazy"
        ],
        "console": "internalConsole",
        "sourceMaps": true,
        "address": "localhost",
        "port": 8081,
        "outFiles": [
            "${workspaceRoot}/.vscode/.react"
        ],
        "env": {
            "NODE_ENV": "test"
        }
    }

这至少会运行测试，在VS调试控制台中显示测试报告，但再次没有任何断点被命中

我还尝试将
outFiles
设置到ignite生成捆绑包的位置，即
${workspaceRoot}/android/app/build/intermediates/assets/debug/*
，结果相同

谁能给我指一下正确的方向吗

另外，我在Ubuntu 16.04上：

System
  platform           linux                                                                                                
  arch               x64                                                                                                  
  cpu                4 cores      Intel(R) Core(TM) i7-4500U CPU @ 1.80GHz  

JavaScript
  node               8.1.2        /usr/local/bin/node  
  npm                4.6.1        /usr/local/bin/npm   
  yarn               0.24.6       /usr/bin/yarn

React Native
  react-native-cli   2.0.1       
  app rn version     0.45.1      

Ignite
  ignite             2.0.0        /usr/local/bin/ignite  

Android
  java               1.8.0_111    /usr/bin/java  
  android home       -            undefined

终于找到了解决办法。节点
8.*
中的新inspector协议似乎仍存在许多问题。简言之，对
--inspect
的支持仍处于试验阶段

例如，NodeJS Inspector管理器（NiM
0.13.8
）在几秒钟后崩溃并断开websocket（请参阅：和Chromium bug#734615）

所以我降级了NodeJS
8.1.2
-->
7.10.1

现在事情终于如预期的那样顺利了。我可以使用以下调试配置在VS代码中进行所有调试，点击所有断点：

[vscode-react-native] Finished executing: adb -s emulator-5554 shell am broadcast -a "com.myexample.RELOAD_APP_ACTION" --ez jsproxy true
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugger worker loaded runtime on port 13746
Running application "MyApplication" with appParams: {"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

    {
        "type": "node",
        "request": "launch",
        "name": "Launch Tests",
        "program": "${workspaceRoot}/node_modules/.bin/jest",
        "args": [
            "--runInBand",
            "--no-cache"
        ],
        "runtimeArgs": [
            "--debug-brk=127.0.0.1:5858"
        ],
        "port": 5858
    }

浪费了超过一天的时间在一件本应该是5分钟的事情上。不用动脑筋。但幸运的是，它现在可以工作了
 好吧，这是一场噩梦！我抛弃了VS代码调试器。无法使其识别任何断点。现在寻找Chrome调试器。只要在命令行上运行
node--inspect brk node_modules/.bin/jest--verbose--no cache--runInBand
，节点检查器管理器就会在Chrome中启动，看起来很有希望。但是……这又碰到了另一个拦截器：。现在似乎没有Chrome调试…似乎仍然没有雪茄。显然，这是使用节点本机对象直接从磁盘运行代码，而不是使用源映射和browserified对象。调查..嗯，我的回答可能涉及大多数情况，但不幸的是不是我的。这是因为Jest从磁盘运行测试，而不是在垫片就位的情况下传输包。Jest团队声明：
“这是预期的行为。Jest应该在源文件上运行。在任何大型代码库上，在运行测试之前生成捆绑包的速度都太慢，因此Jest及时编译文件，这使得它变得很快。”
。虽然可能是沟通失误，但我还是喜欢茉莉花、摩卡和/或因果报应。如果您有问题，我邀请您通过以下方式改进答案：更新：来自Jest团队的更多信息：
Jest处理这一问题的一般方法是自己进行编译。因此，您在配置中设置了Jest自己用来进行传输的转换器。看见https://facebook.github.io/jest/docs/configuration.html#transform-对象字符串此处是Typescript的一个示例配置，让您了解它可能是什么样子：https://github.com/kulshekhar/ts-jest
从节点8.4.0开始，这些问题似乎已得到解决。我使用的是VSCode 1.15.0和Jest 20.0.4，测试调试工作正常。我使用的是VSCode 1.22.3、Node 8.4.0和Jest 22.4.6，我仍然遇到这个问题。