Javascript QUnit test failing when output is correct

Question

I am just learning QUnit and am using a tutorial off the net. Unit Testing Javascript in ASP NET MVC

I have used the following code, but the test fails regardless of the fact that I know that the test data equals the correct number.

The cshtml file:

@{Html.EnableUnobtrusiveJavaScript(true);}


@section Scripts {
<script type="text/javascript">
    var cityCount = 0;
    $(document).ready(function () {
        getCountry();
        $('#CountriesID').change(function () {
            getCity('AU');
        });
    });
    function getCountry() {
        var url = '@Url.Content("~/Home/CountryList")/';

        $.getJSON(url, function (data) {
            var items = [];
            items.push("<option>Select a Country</option>");
            $.each(data, function (i, country) {
                if (country.Value.indexOf("\'") > -1) {
                    s = country.Value + " " + country.Text;
                    alert(s + ": Country.Value cannot contain \'")
                }
                items.push("<option value='" + country.Value + "'>" + country.Text + "</option>");
            });
            $('#CountriesID').html(items.join());
        })
    }

    function getCity(countryId) {
        var url = '@Url.Content("~/Home/CityList")/' + countryId;

        $.getJSON(url, function (data) {
            var items = [];
            var cityCount = 0;
            items.push('<option>Select a City</option>');
            $.each(data, function (i, city) {
                items.push("<option value='" + city.Value + "'>" + city.Text + "</option>");
                cityCount++;
            });
            alert(cityCount);
            $('#CitiesID').html(items.join());
        });
    }

    test("Perform Country onchange", function () {
        $('#CountriesID').trigger("change");
        equals(cityCount, 3, 'The no. of cities should be 3');
    });

</script> 
}
<h2>Country</h2>
@Html.ActionLink("Home", "Index", "Home")

<div class="container">
    <div id="CountriesDivID">
        <label for="Countries">Countries</label>
        <select id="CountriesID" name="Countries"></select>
    </div>    
    <div id="CitiesDivID" >
        <label for="Cities">Cities</label>
        <select id="CitiesID" name="Cities"></select>
    </div>
</div>
<div class="tests">
    <h1 id="qunit-header">QUnit example</h1>               
    <ol id="qunit-tests"></ol>
</div>

I have an alert in the GetCity method to alert me of the value of cityCount which is what is being tested against. It is assert that it should equal 3.

Yet, this is the result of the tests.

So, my question is, what am I doing wrong?

Edit: If I strip out the contents of GetCity and just set citCount = 3, the test passes.