使用React Native

时间:2017-07-12 11:51:41

标签: android debugging react-native visual-studio-code jestjs

我使用热门Ignite CLI v2.0.0default boilerplate创建了一个React Native项目。 然后我用一堆nodejs垫片装饰它,因为我会有一些基于节点的依赖。 一切正常,我可以从命令行运行Jest测试。到目前为止,非常好。

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

所以我想使用Visual Studio代码v1.13.1进行调试,此处问题就出现了。我不能为我的生活找出如何配置这一点,以便我可以在测试中设置断点两者,如应用代码+ node_modules

我已经安装了React Native Tools 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

但是没有破坏点。 VS说:Breakpoint ignored because generated code not found (source map problem?).(顺便说一句:index.android.bundleindex.android.map刚刚在.vscode/.react中生成。 此外,我还没有看到通过测试代码(位于${projectRoot}/Tests)进行调试的方法。

基于大量的谷歌搜索,我创建了另一个用于在VS Code中运行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/*,结果相同。

任何人都可以指出我正确的方向吗?

PS。我在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

1 个答案:

答案 0 :(得分:3)

终于找到了解决方案。似乎节点0.13.8中的新检查器协议仍存在许多问题。简而言之,对8.1.2的支持仍然具有实验性。

例如,NodeJS Inspector Manager(NiM 7.10.1)在几秒钟后崩溃并断开websocket(参见:NiM Github issue #17和Chromium bug#734615)。

所以我降级了NodeJS { "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 } - > {{1}}

现在终于按预期工作了。我可以在VS代码中进行所有调试,使用以下调试配置命中所有断点:

{{1}}

在一个应该是5分钟的事情上浪费了一天多的时间。想都不用想。但幸运的是它现在正在工作!