MVC 4 External Javascript not working

I will made a sample code just to describe my problem, here is the code that I originally use on the view:

@model MyProject.Web.UI.ViewModels.MyModel
@{
    ViewBag.Title = "Test";
}

@section scripts{
    <script>
        $(document).ready(function () {
            alert('Test');
        });

        ... more code here (removed for brevity)
    </script>
}

This one is working well, but as a good practice, I need to move the javascript/jquery code to an external file so the above code turned into this:

@model MyProject.Web.UI.ViewModels.MyModel
@{
    ViewBag.Title = "Test";
}

@section scripts{
    <script src="/Js/external-js-file.js">
    </script>
}

and in my external javascript/jquery file:

$(document).ready(function () {
    alert('Test');
});

... more code here (removed for brevity)

and to my surprise, the alert wasn't even firing, all of the jquery and javascript code is suddenly not working, I've been googling a lot and I can't find any solution to this, am I missing something? Thanks in advance guys.