Typescript-react-starter: Debug Tests in Visual Studio Code

[Vikaskumargd]

Is there a way to debug tests in vs code?

[gbatterbee]

did you find a way to do this?

[Vikaskumargd]

No , all of them were failed attempts. 😔

[Vikaskumargd]

Hi @gbatterbee , do you find any solution for this?

[gbatterbee]

For the moment, I have stopped looking and stuck with es6.

When I get some spare time I'll take a look. Think I need to go through the detail of webpack.

Also might take a look at using create react app with ES6. But then code in typescript and use a task to compile it down to ES5.

On 10 Sep 2017, at 12:59, Vikas Kumar [e-mail] wrote:

Hi @gbatterbee , do you find any solution for this?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[gbatterbee]

The other thought is to write the tests in js.
But not sure how to configure.

Sent from my iPad

On 10 Sep 2017, at 12:59, Vikas Kumar [e-mail] wrote:

Hi @gbatterbee , do you find any solution for this?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Vikaskumargd]

@gbatterbee Are you able to run debug test on simple CRA app?

[gbatterbee]

Yeah, debugging with es6 works.
Can't remember what I did.
Had problems with the jests not auto marking.
Other priorities have come up.
Had to shelve this for a bit.

Don't think this is what I did, but there are some docs here
https://facebook.github.io/jest/docs/en/troubleshooting.html

I did something different, that may account for why the jest mocking wasn't working.

Would be interested to hear if you get all working.

Sent from my iPhone

On 10 Sep 2017, at 22:00, Vikas Kumar [e-mail] wrote:

@gbatterbee Are you able to run debug test on simple CRA app?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Vikaskumargd]

nope this doesn't work for me :(

[Vikaskumargd]

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
      "runtimeArgs": [
        "--inspect-brk",
        "test"
      ],
      "args": [
        "--runInBand",
        "--no-cache",
        "--env=jsdom"
      ],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

this config start the debugger and ran the test but never hit the breakpoint

[gbatterbee]

Will take a look at my code over the weekend. Definitely got my break points bring hit.

Shouldn't be this difficult, should it. Pretty fundamental requirement

Sent from my iPhone

On 10 Sep 2017, at 23:44, Vikas Kumar [e-mail] wrote:

{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"runtimeArgs": [
"--inspect-brk",
"test"
],
"args": [
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
this config start the debugger and ran the test but never hit the breakpoint

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Vikaskumargd]

Thanks @gbatterbee
please let me know the config when you'll available.

[Vikaskumargd]

1. Update react-scripts-ts (to v2.7.0).
2. Update Node.js (to v8.5.0)
3. Use this config in launch.json (VS code)

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug CRA Tests",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
        "runtimeArgs": [
          "--inspect-brk",
          "test"
        ],
        "args": [
          "--runInBand",
          "--no-cache",
          "--env=jsdom"
        ],
        "cwd": "${workspaceRoot}",
        "protocol": "inspector",
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      }
    ]
  }

1. ### From Typescript <2.5.0 to >=2.5.0

Version 2.5.0 introduces a new config file for jest, that is necessary for the tests to run. If you were previously running a version older than v2.5.0 and upgraded to v2.5.0 or newer, you need to manually add the new file, or else you'll get an error similar to this when trying to run your tests:

Test suite failed to run

{
    "messageText": "Cannot read file 'C:\\[project]\\tsconfig.test.json': ENOENT: no such file or directory, open 'C:\\[project]\\tsconfig.test.json'.",
    "category": 1,
    "code": 5012
}

To fix this, create a new file in the root of the project called tsconfig.test.json, and paste the content of this file into it. Everything should work now. For more info, please see this issue.

[gbatterbee]

This makes me a very happy person :D
Thanks for sharing @Vikaskumargd

[jedmao]

Moving test to the runtimeArgs didn't work for me. --inspect-brk didn't get rid of that deprecation warning either, so this is what worked for me...

{
    "version": "0.2.0",
    "configurations": [
        {
          "name": "Debug CRA Tests",
          "type": "node",
          "request": "launch",
          "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts-ts",
          "args": [
              "test",
             "--runInBand",
             "--no-cache",
             "--env=jsdom"
          ],
          "cwd": "${workspaceRoot}",
          "protocol": "inspector",
          "console": "integratedTerminal",
          "internalConsoleOptions": "neverOpen"
        }
    ]
}