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?

Answer 1

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.