ReSharper 6 Introduces Support for JavaScript Unit Testing with QUnit

Previous posts introducing ReSharper 6:

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?

Right now! The public EAP build includes this functionality. Download it from here the ReSharper 6 Early Access page.

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.

This entry was posted in ReSharper Tips&Tricks and tagged , , , . Bookmark the permalink.

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

  1. Karl says:

    Hello, it is great to see progress that Resharper 6 has made. Cong!

    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.

  2. Hadi Hariri says:

    @Karl,

    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.

    http://youtrack.jetbrains.net/issue/RSRP-239828

    Thanks.

  3. Vasiliy Aksyonov says:

    Great! But will you add a support for other JS testing frameworks or interface for using them?

  4. Hadi Hariri says:

    @Vasiiy,

    Yes, that’s the plan. Although to begin with, out of the box only QUnit will be supported.

  5. David says:

    So this is off-topic; but relevant to the code you posted…

    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

  6. Vasiliy Aksyonov says:

    Absolutely agree with David, i thought that it is a bug, but it seems to be a feature :D

  7. Hadi Hariri says:

    @David, @Vasiliy

    We’re looking into those issues.

  8. Roland says:

    Yes, its me again! Release please ! I can’t live without new features now after I read about them. ! :)

  9. fschwiet says:

    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.

  10. Neil Mosafi says:

    Lovely news!
    I second fschwiet’s comment – any plans to support Jasmine? It’s quite popular too.

  11. Hadi Hariri says:

    @Fschwiet, @Neil

    Could you please log the request in YouTrack? The more people vote for it, the more chances there will be on us providing it out of the box. However, that probably will not happen for 6.

    You can log it here: http://youtrack.jetbrains.net/issues/RSRP

    Thanks.

  12. Guido Tapia says:

    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.

    Guido

  13. Hadi Hariri says:

    @Guido,

    Currently only QUnit but you could extend it to add support for other type of frameworks.

  14. Ramona Eid says:

    Is is possible for the:
    ///

    to point to an external js file somewhere on the Internet?

  15. Ramona Eid says:

    Is is possible for the:
    (referenc path)

    to point to an external js file somewhere on the Internet

  16. Polly Shaw says:

    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?

  17. pmn says:

    @Ramona Eid – I’d like to know too!

  18. Hadi Hariri says:

    @Ramona, @Polly, @pmn,

    As far as I’m aware this is not possible, but please feel free to log a feature request for it.

  19. Steen Hulthin Rasmussen says:

    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?

  20. Hadi Hariri says:

    @Steen,

    Currently even if you were to install R# on the server, it wouldn’t help. Running QUnit on the server kind of fails out of the context of R#. It’s more in TC’s area.

  21. Christian says:

    Great stuff! I can’t, however, get the code under test into the tests when the c.u.t.-file isn’t located in the same folder as the test file. Is this a known limitation?
    Cheers,
    Christian

  22. Hadi Hariri says:

    @Christian

    Currently yes.

  23. Johan says:

    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?

  24. Hadi Hariri says:

    @Johan

    It’s logged. Hoping it will be fixed for next version, but not sure if it will be in a minor revision.

  25. acl123 says:

    Hi there,
    What happens if your javascript under test requires another javascript (e.g. another embedded resource, jQuery, mooTools etc)?

  26. Marc says:

    @acl123 just include them like the example:

    ///
    ///

  27. Marc says:

    or not… (remove spaces)

    ///
    ///

  28. Marc says:

    or just give up…
    reference path=”jquery…js”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>