ReferenceError in Jasmine test using Chutzpah and ReSharper

Question

I'm using Jasmine and Chutzpah to test my TypeScript project in Visual Studio 2013 with PhantomJS. If I run the tests using the Chutzpah context menu extension they work fine but when I run them using the ReSharper test explorer, they fail if there are any external dependencies. The error message is ReferenceError: $ is not defined.

My project structure looks like:

- Scripts
  - MyApp
    - Components
      - DatePicker.ts
  - Tests
    - Components
      - DatePickerTest.ts
  - typings
    - jquery
      - jquery.d.ts
  - jquery-1.10.2.js
Chutzpah.json

Chutzpah.json looks like

{
    "Framework": "jasmine",
    "Compile": {
        "Mode": "External",
        "Extensions": [ ".ts" ],
        "ExtensionsWithNoOutput": [ ".d.ts" ]
    },
    "References": [
        {
            "Includes": [
                "*/Scripts/jquery-1.10.2.js"
            ],
            "Excludes": [ "*/Scripts/*.d.ts" ]
        }
    ],
    "Tests": [
        {
            "Includes": [ "*/Scripts/Tests/*.ts" ],
            "Excludes": [ "*/scripts/Tests/*.d.ts" ]
        }
    ]
}

DatePickerTest.ts looks like

/// <reference path="../../myapp/components/datepicker.ts" />
import DatePicker = MyApp.Components.DatePicker;

describe("Datepicker", () => {
    var datePicker: DatePicker
    beforeEach(() => {
        datePicker = new DatePicker();
    });

    // tests
});

Instantiating the DatePicker fails with the message ReferenceError: $ is not defined because the class uses $.extend() in the constructor.

I've tried declaring the reference to jQuery at the top of the test by adding the line /// <chutzpah_reference path="../../jaquery-1.10.2.js" /> but that doesn't make any difference. Plus my understanding is that adding references in the Chutzpah.json means I shouldn't have to do this anyway.

As suggested in this answer, I have debugged my test in the browser and sure enough jQuery isn't being loaded in the index.html page, so what am I doing wrong?

Seems like you need to add a jQuery TypeScript declaration file ("jquery.d.ts") as a nuget package to the project and reference it in the test file - https://www.jetbrains.com/resharper/help/Unit_Testing_in_TypeScript.html — Alexander Kurakin, Jan 22 '16 at 09:51
I do have that in my project I just didn't put it in my question because I didn't think it was relevant, but I've edited to add it now. — Tim Barclay, Jan 22 '16 at 09:55
Have you added "jquery.d.ts" reference in DatePickerTest.ts? By the way, what ReSharper build do you use - ReSharper | Help | About JB ReSharper Ultimate? — Alexander Kurakin, Jan 22 '16 at 10:25
Can you provide a full repro (maybe a github repo) so I can test locally? — Matthew Manela, Jan 23 '16 at 20:36
@Alexander I had jquery.d.ts referenced in the class under test and it seems that was enough because referencing it in the test as well didn't make a difference. I've found the problem and detailed it in my answer, but thanks for the link in your first comment because that helped me work it out — Tim Barclay, Jan 25 '16 at 09:32

score 0 · Accepted Answer · answered Jan 25 '16 at 09:23

The problem came down to how ReSharper attempts to resolve dependencies based on the type definition references it finds. The ReSharper unit testing docs say:

If your test file references and (sic) external JavaScript library using a declaration file (*.d.ts), ReSharper will search the original JavaScript file by the name of the *.d.ts file.

My class under test was referencing the jQuery definition file:

/// <reference path="../../typings/jquery/jquery.d.ts" />

The problem was that I also have jquery.cookie.js included in my project (as part of Foundation), and ReSharper was incorrectly including that instead of jquery-1.10.2.js.

Renaming or removing jquery.cookie.js allowed ReSharper to find the correct jQuery file and solved the problem.

ReferenceError in Jasmine test using Chutzpah and ReSharper

1 Answers1