CODEWITHSUNDEEP
javascriptrequirejsjasminephantomjs
user3715648
user3715648

Reputation: 1588

PhantomJS not playing nice with RequireJS+Jasmine

I have some tests running with RequireJS and Jasmine. I have a Jasmine test harness file that looks like this:

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./Scripts/jasmine/jasmine.css" />
    <script type="text/javascript" src="./Scripts/jasmine/jasmine.js"></script>
    <script type="text/javascript" src="./Scripts/jasmine/jasmine-html.js"></script>
    <script type="text/javascript" src="./Scripts/jasmine/boot.js"></script>

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>

    <script type="text/javascript">

        require(["fakeTest"], function () {
                window.onload();
        });

    </script>
</head>
<body>
</body>
</html>

My fakeTest file is very simple:

define(["require", "exports"], function (require, exports) {
    describe("fake test", function () {
        it("test nothing", function () {
            expect(1).toEqual(1);
        });
    });
});

If I run this in FireFox/Chrome then everything works fine; I see one test and that it passed. If I run this with PhantomJS though, I start getting problems. Running it with the remote debugger flag I get the error:

Error: Cannot find module 'fakeTest'

phantomjs://bootstrap.js:299 in require
phantomjs://bootstrap.js:263 in require

If I try changing my harness file so that it says requirejs[("fakeTest"...... instead of just require, I get this error:

Error: Script error for "fakeTest" http://requirejs.org/docs/errors.html#scripterror

https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:140 in defaultOnError
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:544 in onError
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1732 in onScriptError :0 in appendChild
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1952 in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1679 in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:829 in load
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:819 in fetch
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:851 in check
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1177 in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1550 in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1162 https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:131 https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:56 in each
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1114 in enable
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:783 in init
https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js:1453

If I put in a completely invalid module name, I get the same errors in both cases.

I'm totally lost as to why this is happening. I've played around with changing the path for fakeTest in the harness file but nothing changes. I've simplified the harness file as much as I could, but since I'm still seeing this i'm not sure what else to try. Anyone have any ideas?

edit

I've removed everything to do with Jasmine and just have fakeTest do an alert. Now I get errors saying 

<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
    <script type="text/javascript">
        require(["fakeTest"], function () {});
    </script>
</head>
<body>
</body>
</html>

and

define(["require", "exports"], function (require, exports) {
    alert('foo');
});

"ReferenceError: Can't find variable: requirejs"

Upvotes: 3

Views: 650

Answers (2)

Tomasz Jakub Rup
Tomasz Jakub Rup

Reputation: 10680

Instead of

<script type="text/javascript" 
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js"></script>

use

<script type="text/javascript" 
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js" 
        data-main="Tests/main"></script>

Move test files to Tests directory.

In Tests/main.js use Your requirejs config and run main tests file.

var deps = ['Tests/fakeTest'];

require.config({
  baseUrl: '..',

  paths: {
      'jasmine': ['Scripts/jasmine//jasmine'],
      'jasmine-html': ['Scripts/jasmine/jasmine-html'],
      'jasmine-boot': ['Scripts/jasmine/boot']
  },
  // shim: makes external libraries compatible with requirejs (AMD)
  shim: {
    'jasmine-html': {
      deps : ['jasmine']
    },
    'jasmine-boot': {
      deps : ['jasmine', 'jasmine-html']
    }
  }
});

require(['jasmine-boot'], function () {
  require(deps, function(){
    //trigger Jasmine
    window.onload();
  })
});

In index.html run only Tests/main.js file:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./Scripts/jasmine/jasmine.css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.22/require.js" data-main="Tests/main"></script>
</head>
<body>
</body>
</html>

Upvotes: 0

Tomasz Jakub Rup
Tomasz Jakub Rup

Reputation: 10680

Instead of write html use karma with requirejs plugin.

karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine', 'requirejs'],

    files: [
      {pattern: 'Scripts/**/*.js', included: false},
      {pattern: 'test/*.js', included: false},

      'test/test-main.js'
    ],

    // list of files to exclude
    exclude: [],

    browsers: ['PhantomJS']
  });
};

test/test-main.js

var TEST_REGEXP = /(spec|test)\.js$/i;
var allTestFiles = [];

// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    // If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
    // then do not normalize the paths
    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
    allTestFiles.push(normalizedTestModule);
  }
});

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: '/base',

  // example of using a couple path translations (paths), to allow us to refer to different library dependencies, without using relative paths
  paths: {
    // Put Your requirejs config here
  },

  // example of using a shim, to load non AMD libraries (such as underscore)
  shim: {
  },

  // dynamically load all test files
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});

This is example files. Fix it and run

karma run

Upvotes: 0

Related Questions