How do you debug Jasmine tests with Resharper?

Question

I can't find a way to debug (walk through) JavaScript code when running Jasmine tests with Resharper in Visual Studio 2012. I tried running tests with browser (Chrome) but the test runner closes the port as soon as the test is run and so I cannot put a breakpoint in the code. Also tried running in Internet Explorer and put breakpoints in Visual Studio but it won't attach to the process. My test has a lot of ///reference scripts that Resharper includes automatically in the test runner but I don't want to manually do this for every test that I want to debug. Please help me understand this. If you have a jasmine test that is failing, then how do you debug it?

Solution 1

Try to use debugger keyword. Simply add the following line to the code you want to debug (perhaps into the spec):

debugger;

It invokes any available debugging functionality. It doesn't work in IE but works pretty well in Chrome (you wrote you use it so I guess it's enough just for debugging).

Of course, after that be sure to remove the debugger keyword! Perhaps there is no really simple way how to avoid it in production code in general (in case you will use it not only in spesc) but if you are interested in this SO question could be helpful.

Solution 2

Since I didn't got debugger; to work I found another solution. By adding the following to my test, resharper won't be notified that the test has finished so we can set debug breakpoints in the opened browser (I use chrome) and update (F5) the page.

jasmine.getEnv().currentRunner_.finishCallback = function () {};

Since Jasmine 2.0 you need to use:

ReSharperReporter.prototype.jasmineDone = function () { };

Stop the tests in resharper testrunner window when you're done.

Also this can be done for QUnit

QUnit.moduleDone = function(){}

Solution 3

As I posted on Debugging jasmine tests with resharper and phantom js

I got debugger; to work by setting IE 11 as my test browser in ReSharper options. The cool thing is that you can set your breakpoints in the Visual Studio version of the code and set through and debug using Visual Studio. You really do not need to interact with the browser.

Comments

[orad]

My workaround so far is not to use Resharper for debugging. Do the manual work: Get Jasmine Standalone Test Runner and include all references in script tags and include the test itself. Then debug in the browser's developer console.

[zbynour]

Do I understand correctly that Re# runner opens the browser and you want to debug your specs in the browser?

[orad]

@zbynour Can't do that because it closes the http port as soon as the test is done.

[orad]

Great, I thought debugger; was supported in IE only because I used it before but didn't know it existed in Chrome also. Thanks!

[Matt Klinker]

This doesn't seem to work for me within Chrome as it happily continues execution without ever jumping to debugger. Any other suggestions?

[zbynour]

@mklinker excuse me please for too long response time... The only thing which came to my mind is to open developer tools in the browser (because it invokes "any available debugging funxtionality" so no debugger opened means it happily continues as you wrote). But I don't know whether it is possible to do that (in which way you open the browser). Currently I use Testacular runner so it is easy to open dev tools in the captured browser (because it remains opened).

[Torbjörn Nomell]

Not the most obvious solution :) And kudos to @Kestas for the Jasmine 2.0 part

[zumalifeguard]

Also, if the tests are in TypeScript files, you'll get an error on access the ReSharperReporter global variable. One work around is to use syntax like this: window['ReSharperReporter'].prototype.jasmineDone = function () { };

[Marcel]

This won't do the job due to ReSharper opens a new page each time you press "Run Unit Test" and you cannot hit F12 fast enough to open the developer console on your browser. And ReSharper randomizes the port where the test server is running so the browser cannot remember you hit F12 already.