In ReShaper 6 we have taken the first step to make it easier for developers to work with JavaScript. By providing support for analysis, refactoring and code-navigation, we try and remove some of the difficulties developers might encounter when working with this language. Now we’re taking the next step!

Running QUnit from ReSharper

When it comes to Unit Testing, even some of the more experienced JavaScript developers tend to not pay too much attention to testing their code. Reasons for this include too much friction, lack of understanding on how to test, what framework to use, etc. Although we can’t solve all of the problems, we are going to try and remove a few of them by providing support for running JavaScript Unit Tests in an easier way with ReSharper. And we are starting this by providing support for QUnit, the unit testing framework used by jQuery. You will be able to run QUnit JavaScript tests using the same interfaces you know and love in ReSharper. And the best part of it all, is that it’s really easy! Let’s see how.

1. Define the code under test

First step is to have some code that we want to test. This code can be located in the same file where are tests are (not recommended) or in different files. In our case, we want to test some simple calculator operations:

We have placed this code in a file called CodeUnderTest.js but it can be named absolutely anything.

2. Write some tests

Writing Unit Tests in QUnit is pretty straightforward. Whereas with most test frameworks, you’d normally write a class that contains test methods, with QUnit, you call a function test which takes two parameters, a description of the test and the actual code to test, which is passed in as a function:

We place this code in a file called CalculatorTests.js (again, can be named anything). Our project structure now looks like this:

Since our tests are located in a file different to that of our tests, we do need to tell ReSharper which code we are referring to by using a specific reference notation at the top of the test file:

As soon as we add the tests, ReSharper will detect that these are QUnit tests and provide us with the ability to run them by placing the Test Runner menu in the left gutter:

providing us with the ability to run the tests:

We can now run individual tests and get the output displayed in the ReSharper test runner:

Notice how the tests are grouped under “Calculator tests”. This is done using the module function which allows grouping of tests:

When the tests are run, ReSharper launches the default system browser which runs the tests and reports the information back to ReSharper. Normally, to run QUnit tests, you would need to create an HTML file that runs the them. This is handled internally by ReSharper, so it’s one less step to perform.

If you prefer to use a specific browser to run the tests, you can do so by changing the browser under the ReSharper Options | Tools | Qunit

There is still more to come…

Currently, ReSharper is bundling the latest available version of QUnit (at the time of building). We will be adding support in upcoming releases which will allow you to use your own version of QUnit. Also, we will be looking at providing access to the HTML file that ReSharper generates, allowing better support for Continuous Integration environments, as well as the possibility of running the tests from the browser directly.

When can you play with it?

And as always, feedback welcome. Feel free to provide comments here or using our issue tracking system where you’ll not only be able to monitor the status of a feature but also get people to vote for it.

29 Responses to ReSharper 6 Introduces Support for JavaScript Unit Testing with QUnit

I have a question, though. Not sure if it is OK to ask here. Actually quite simple:
How can I change the font used in some dialogs/windows that Resharper pops up? For example, when I use shortcut Ctrl+N to navigate types, words like “Enter type name” and “Include library types” are in an ugly font that is not consistent with my normal VS settings. I spent more than a couple of hours but could not find out how to customize the font. Will you support that in Resharper 6? Or does Resharper just read the setting from OS? If yes, where to change the font setting that Resharper reads? (I am using Windows 7 and Visual Studio 2010.) Thanks a lot.

I don’t think that’s possible, but I will check. I think it’s actually a very important feature to add in terms of accessibility support too. I’ve logged the issue here so you can be kept updated on it.

Basically, you are saying that the crazy make-my-code-impossible-to-read-by-a-humans function indentation is NOT a bug?!? That can’t be intentional, can it?

I’ve just assumed it was a beta-bug but after seeing this post should I assume that this is how it is going to be from now on? And if so, is there going to be a way to turn it off? And if not, is there going to be (or is there currently) a way to to ReSharper’s javascript “formatting” off entirely?

By the way, this is not an opinion, it is an absolute fact: you’re doing it wrong.
/endrant

Great product overall. I love ReSharper! Well, most of it, I guess :-p

I suppose if you’re going to support one javascript test framework, QUnit is the one to support. Given its part of jQuery and all that. But, if by chance, you decide to support two, please support Jasmine (http://pivotal.github.com/jasmine/). I’ve used both, but only use Jasmine now.

A few qs on JS unit testing:
Any other framework supported? I.e. Jsunit, closure tests, etc
Will team city also run these tests?
Is the testing functionality extensible, I.e. Can I plug my own unit test lib if not supported out of box?

Good work guys, glad to see more JS stuff making into your awesome product.

I might want to test the javascript that’s present in dynamic pages, such as MVC views. It would be really good if the reference path could be a path to a relative url on the site, and the page were spun up (in Cassini or IIS, depending on the website’s settings) when ReSharper ran the QUnit tests. Can this be done?

Really nice to just be able to write the intent in the QNunit tests, but how does this play with CI?
Making QUnit tests run on for instance Teamcity is not that trivial normally, but I really don’t want to install Resharper on my build server in order run the QUnit tests.
What is the story here? Is there a clean way a can run the QUnit tests I write with “resharper-syntax” on my build server?

Forcing the test script file to be in the same folder as the code under test is a bit of a hindrance for us. Has there been any progress with this, or is there an estimate for when this will be solved?