Require.JS and JS Test Driver: Unexpected token <

3.6k Views Asked by At

I am trying to test a simple Backbone Model loaded via RequireJS:

define ["backbone"], (Backbone)->

    class Todo extends Backbone.Model 
        defaults:
            title: ''
            priority: 0
            done: false

        validate: (attrs) -> 
            errs = {}
            hasErrors = false

            if (attrs.title is "")
                hasErrors = true
                errs.title = "Please specify a todo"

            if hasErrors
                return errs

        toggleDone: ->
            @save("done", !@get("done"))

    return Todo

My tests look like:

requirejs.config 
    baseUrl: "js/"
    paths: 
        jquery: "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min"
        jqueryui: "https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min"
        json2: "http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2"
        underscore: "http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min"
        backbone: "http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min"
        backboneLocalStorage: "https://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage-min"
    shim: 
        "underscore":
            exports: "_"
        "backbone": 
            deps: ["jquery", "underscore", "json2"]
            exports: "Backbone"
        "jqueryui": 
            deps: ["jquery"]
        "backboneLocalStorage":
            deps: ["backbone"]
            exports: "Backbone.LocalStorage"

require ["models/todo"], (Todo) ->

    console.log Todo

    TodoTests = TestCase("TodoTests")

    TodoTests::testCreateTodo = -> 
        todo = new Todo({ title: "Hello" })
        assertEquals "Hello", todo.get("title")
        assertEquals 0, todo.get("priority")
        assertEquals false, todo.get("done")

The JS Test Driver config:

server: http://localhost:3001

load:
  - ../public/js/libs/require.js
  - ../public/js/tests.js

serve:
  - ../public/js/models/*
  - ../public/js/collections/*
  - ../public/js/views/*

Problem seen from the JS Test Driver listened page on Chrome console:

Uncaught SyntaxError: Unexpected token <

Looking at Todo.js from Chrome,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Console Runner</title><script type="text/javascript">var start = new Date().getTime();</script>
Uncaught SyntaxError: Unexpected token <
<script src="/static/lib/json2.js" type="text/javascript"></script><script src="/static/lib/json_sans_eval.js" type="text/javascript"></script><script src="/static/jstestdrivernamespace.js" type="text/javascript"></script><script src="/static/lib/jquery-min.js" type="text/javascript"></script><script src="/static/runner.js" type="text/javascript"></script><script type="text/javascript">jstestdriver.runConfig = {'debug':false};</script>
<script type="text/javascript">jstestdriver.console = new jstestdriver.Console();

Notice its a HTML page instead of my actual JS. Also console.log(Todo) returns undefined since a HTML page is returned in place of a JS. Did I configure this wrongly?

2

There are 2 best solutions below

0
On

Have you checked your ajax responses? I just had the same thing and that '<' was from the opening doctype tag that was returned when the resource 404'd...

0
On

I struggled with this for days and searched with Google endlessly until I finally found out what JsTestDriver was doing. In your requirejs.config, for your tests to run properly, your baseUrl needs to be:

baseUrl: /test/path/to/your/stuff

The reason is when JsTestDriver makes its server, it prepends /test/ to all the directories. If the baseUrl isn't set properly, it starts trying to send back local a reference to window I think.

The only other problem that I see you may run into is running the tests with the require statement as the first line. I have Jasmine and putting my require() at the top of my tests caused them to never run so I had to do it in my beforeEach for my tests and get the object before they ran.

I'm probably doing something wrong though I see countless other people claiming that the require statement in Jasmine works, so my hunt continues.