使用React Native在VS Code中使用断点调试Jest单元测试 [英] Debugging Jest unit tests with breakpoints in VS Code with React Native

问题描述

我使用流行的 Ignite CLI v2.0.0和默认样板. 然后我用一堆nodejs垫片进行装饰，因为我将有一些基于节点的依赖关系. 一切正常，我可以从命令行运行Jest测试.到目前为止，一切都很好.

I created a React Native project using the popular Ignite CLI v2.0.0 with the default boilerplate. Then I adorned it with a bunch of nodejs shims, because I'll have some node-based dependencies. Everything is working and I can run the Jest tests from the command line. So far, so good.

但是，现在我的单元测试之一正在超时.这可能是由于异步调用失败，该调用调用了模拟节点功能.但是没有有关错误，位置等的信息.

However, now one of my unit tests is timing out. This is probably due to an async call failing that invokes a mocked out node function. But there is no information on error, location, etc.

所以我想使用Visual Studio Code v1.13.1进行调试，然后问题开始了.我一辈子都无法弄清楚如何配置它，因此可以像在应用程序代码+ node_modules中那样在测试中同时设置断点两者.

So I want to debug using Visual Studio Code v1.13.1 and here problem starts. I can't for the life of me figure out how to configure this so I can set breakpoints both in the tests as in the app code + node_modules.

我已经安装了React Native Tools v0.3.2，并且可以使用默认的Debug Android配置启动调试器:

I have installed the React Native Tools v0.3.2 and can start the debugger using the default Debug Android configuration:

[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.bundle和index.android.map都刚在.vscode/.react中生成). 而且我也没有看到一种通过测试代码进行调试的方法(位于${projectRoot}/Tests中).

But no breakpoints are hit. VS says: Breakpoint ignored because generated code not found (source map problem?). (btw: both index.android.bundle and index.android.map have just been generated in .vscode/.react). And also I don't see a way to debug through the test code (which lives in ${projectRoot}/Tests).

基于大量的搜索，我创建了另一个调试配置以在VS Code中运行Jest:

Based on much googling I created another debug configuration for running Jest in VS Code:

    {
        "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调试控制台中显示测试报告，但是再也不会碰到任何断点.

This at least runs the tests, showing test report in the VS debug console, but once again no breakpoint anywhere gets hit.

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

I also tried setting outFiles to the location where ignite generates the bundle, i.e. ${workspaceRoot}/android/app/build/intermediates/assets/debug/* with same results.

有人能指出我正确的方向吗?

Can anyone please point me in the right direction?

PS.我在Ubuntu 16.04上:

PS. I am on 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.*中的新检查器协议似乎仍然存在许多问题.简而言之，对--inspect的支持仍处于试验阶段.

Finally found the solution. It seems there are still a number of issues with the new inspector protocol in Node 8.*. In short the support for --inspect is still quite experimental.

例如，NodeJS检查器管理器(NiM 0.13.8)在几秒钟后崩溃并断开了Websocket的连接(请参阅:

For example the NodeJS Inspector Manager (NiM 0.13.8) was crashing and disconnecting websocket after few second (See: NiM Github issue #17 and Chromium bug #734615).

所以我降级了NodeJS 8.1.2-> 7.10.1

So I downgraded NodeJS 8.1.2 --> 7.10.1

现在终于一切都按预期进行了.我可以使用VS代码进行所有调试，并使用以下调试配置命中所有断点:

Now finally things work as expected. I can do all debugging in VS code, hit all the breakpoints, with the following debug configuration:

    {
        "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分钟.不费吹灰之力.但幸运的是它现在可以正常工作！

Wasted more than a day on something that should be a 5 min. no-brainer. But luckily its working now!

这篇关于使用React Native在VS Code中使用断点调试Jest单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！