Test a requirejs project using mocha-phantomjs, chai and sinon

#sinon

#requirejs

#phantomjs

#mocha

#javascript

#chai

I was trying this week to configure and test a requirejs project. It uses mocha-phantomjs to execute the tests; chai as the assertion library; and sinon.js to mock or stub dependencies.

I tried this how-to test requirejs with mocha-phantomjs and grunt , but didn't get enough info about how to add chai and sinon.

I finally conclude that the best and easiest way to accomplish that is like this:

sinon.js included in a script tag in the testRunner.html
chai.js included in the asynchronous module definition by requirejs.

testRunner.html

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/node_modules/mocha/mocha.css" />
</head>
<body>
    <div id="mocha"></div>
    <script src="lib/node_modules/sinon/pkg/sinon.js"></script>
    <script src="lib/node_modules/mocha/mocha.js"></script>
    <script>
        mocha.ui('tdd');
    </script>
    <script src="../scripts/require.js" data-main="test.config.js" ></script>
</body>
</html>

test.config.js

require.config({
    baseUrl: "../scripts/src",
    paths: {
        chai: '../../test/lib/node_modules/chai/chai'
    }
});

require([
    '../../test/src/UserMediaTest'
], function() {
    if (typeof mochaPhantomJS !== "undefined") { mochaPhantomJS.run(); }
    else { mocha.run(); }
});

UserMediaTest.js

chai can be added in the asynchronous module definition, but for some reason, sinon can't. Requirejs won't define it. Thats why its added in a script tag in the testRunner.html

define(['chai', 'UserMedia','NavigatorWrapper'], function(chai, UserMedia, NavigatorWrapper) {
    suite('NavigatorWrapper.hasGetUserMedia', function() {
        var sut, mockNavigator, instanceNavigator;
        setup(function() {
            instanceNavigator = new NavigatorWrapper();
            mockNavigator = sinon.mock(instanceNavigator);
            sut = new UserMedia(instanceNavigator);
         });

         ....

        });
});

You can see more in https://github.com/tomas2387/webrtcApp

Written by Tomás

Say Thanks

Respond

Related protips

Mocking Backbone.Model fetch() requests with Sinon.fakeServer

8.119K

jQuery chain testing with sinonJS

5.765K

Use sinonJs FakeServer to mock you API

4.517K

3 Responses

Add your response

x2es

Hello!
I think that TDD test-runner should be done in more transparent way.
While learning sinon I found that its author wrote the book http://tddjs.com/
I am agree with Christian Johansen about test-runner concept - it should be fully automated and scalable, it should totally exclude F5 from usual workflow and should provide quick access to all sensible information in same place.
While Christian writing about jsTestDriver which requires Java, today available great test-runer "karma" http://karma-runner.github.io/0.10/index.html

I have wrote boilerplate which integrates karma, mocha, chai, sinon for testing and RequireJS for making architecture. You may checkout it here: https://github.com/x2es/boilerplate-karma-mocha-chai-requirejs

over 1 year ago ·

Tomás Prado

Nice!
What is that "karma-sound" folder? It really speaks-out when a test pass?? LOL

I have to try that

over 1 year ago ·

x2es

karma-sound folder is left for demonstrate how to make custom sound configuration in karma.conf.js instead of default sounds from karma-mp3-reporter @see karma.conf.js

over 1 year ago ·