diff --git a/gulp/tasks/test.js b/gulp/tasks/test.js
index 037f74f4a..5b9afdba2 100644
--- a/gulp/tasks/test.js
+++ b/gulp/tasks/test.js
@@ -14,6 +14,9 @@ var insert = require('gulp-insert');
 var jshint = require('gulp-jshint');
 var stylish = require('jshint-stylish');
 
+var qunit = require('gulp-qunit');
+var bower = require('gulp-bower');
+
 // Using gulp-jshint and jshint-stylish
 gulp.task('lint', function() {
     return gulp.src(['./src/**/*.js', '!**/parser/*.js'])
@@ -21,7 +24,7 @@ gulp.task('lint', function() {
         .pipe(jshint.reporter(stylish));
 });
 
-gulp.task('test',['coverage','tape','jasmine']);
+gulp.task('test',['coverage','tape','jasmine','qunit']);
 
 gulp.task('jasmine',['jison','lint'], function () {
     return gulp.src(['src/**/*.spec.js'])
@@ -44,4 +47,14 @@ gulp.task('coverage', function (cb) {
                 .pipe(istanbul.writeReports()) // Creating the reports after tests runned
                 .on('end', cb);
         });
-});
\ No newline at end of file
+});
+
+gulp.task('qunit', ['usageTestsBower'], function() {
+    return gulp.src('test/usageTests/requireTest.html')
+        .pipe(qunit());
+});
+
+gulp.task('usageTestsBower', function() {
+    return bower({cwd: 'test/usageTests'})
+        .pipe(gulp.dest('test/usageTests/bower_components'));
+});
diff --git a/package.json b/package.json
index ce9ce6045..9f34be67f 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "express": "^4.12.4",
     "foundation": "^4.2.1-1",
     "front-matter": "^0.2.0",
-    "gulp": "~3.8.9",
+    "gulp-bower": "0.0.10",
     "gulp-browserify": "^0.5.0",
     "gulp-bump": "^0.1.11",
     "gulp-concat": "~2.4.1",
@@ -61,20 +61,21 @@
     "gulp-jshint": "^1.9.0",
     "gulp-less": "^3.0.1",
     "gulp-livereload": "^3.8.0",
+    "gulp-qunit": "~1.2.1",
     "gulp-rename": "~1.2.0",
     "gulp-shell": "^0.2.10",
     "gulp-tag-version": "^1.2.1",
     "gulp-uglify": "~1.0.1",
+    "gulp": "~3.8.9",
     "he": "^0.5.0",
     "hogan.js": "^3.0.2",
     "jasmine": "~2.0.1",
     "jison": "~0.4.15",
     "jshint-stylish": "^1.0.0",
-    "karma": "~0.12.20",
     "karma-chrome-launcher": "~0.1.5",
     "karma-jasmine": "~0.2.1",
     "karma-requirejs": "~0.2.2",
-    "lodash": "^2.4.1",
+    "karma": "~0.12.20",
     "lodash._escapestringchar": "^2.4.1",
     "lodash._objecttypes": "^2.4.1",
     "lodash._reinterpolate": "^2.4.1",
@@ -82,6 +83,7 @@
     "lodash.defaults": "^2.4.1",
     "lodash.templatesettings": "^2.4.1",
     "lodash.values": "^2.4.1",
+    "lodash": "^2.4.1",
     "marked": "^0.3.2",
     "mock-browser": "^0.90.27",
     "path": "^0.4.9",
diff --git a/test/usageTests/bower.json b/test/usageTests/bower.json
index 3ce3f744f..dea677072 100644
--- a/test/usageTests/bower.json
+++ b/test/usageTests/bower.json
@@ -15,6 +15,7 @@
   ],
   "dependencies": {
     "requirejs": "~2.1.16",
-    "mermaid": "~0.4.0"
+    "mermaid": "~0.4.0",
+    "qunit": "~1.18.0"
   }
 }
diff --git a/test/usageTests/reqJsApp.js b/test/usageTests/reqJsApp.js
index 313cabb41..4c9290f24 100644
--- a/test/usageTests/reqJsApp.js
+++ b/test/usageTests/reqJsApp.js
@@ -1,22 +1,28 @@
 require.config({
-    baseUrl: '.',
     paths: {
-        // the left side is the module ID,
-        // the right side is the path to
-        // the jQuery file, relative to baseUrl.
-        // Also, the path should NOT include
-        // the '.js' file extension. This example
-        // is using jQuery 1.9.0 located at
-        // js/lib/jquery-1.9.0.js, relative to
-        // the HTML page.
-        mermaid: 'bower_components/mermaid/dist/mermaid.full'
+        mermaid: '../../dist/mermaid'
+    },
+    shim: {
+        mermaid: {
+            exports: 'mermaid'
+        }
     }
 });
 
-// Start the main app logic.
-requirejs(['simple','mermaid'],
-    function   (simple) {
-        //jQuery, canvas and the app/sub module are all
-        //loaded and can be used here now.
-        mermaid.init();
-    });
\ No newline at end of file
+require([], function (){
+    QUnit.module('requireTest.html');
+
+    QUnit.test('using mermaid in requirejs', function (assert){
+        var done = assert.async();
+        require(['mermaid'], function (mermaid) {
+            assert.ok(mermaid, 'mermaid is not null');
+            mermaid.init();
+            assert.equal(window.d3.selectAll('path')[0].length, 8,
+                'drew 8 paths');
+            done();
+        });
+    });
+
+    QUnit.load();
+    QUnit.start();
+});
diff --git a/test/usageTests/requireTest.html b/test/usageTests/requireTest.html
index 758d30298..2fbfb5f27 100644
--- a/test/usageTests/requireTest.html
+++ b/test/usageTests/requireTest.html
@@ -2,41 +2,26 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <link rel="stylesheet" href="bower_components/qunit/qunit/qunit.css" />
+    <link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
+
+    <script src="bower_components/qunit/qunit/qunit.js"></script>
+    <script>
+        QUnit.config.autostart = false;
+    </script>
 
     <script data-main="reqJsApp.js" src="bower_components/requirejs/require.js"></script>
-    <script>
-        var mermaid_config = {
-            startOnLoad:true
-        }
-    </script>
 </head>
-    <body>
-        TEST 0.4.1
-    <div class="mermaid">
-        graph TD;
-        sq[Square shape2] --> ci((Circle shape // Начало)) 
-    </div>
-    <h1>Shapes</h1>
-        <div class="mermaid">
-            info
-        </div>
-    <div class="mermaid">
-graph LR
-    A[Square Rect] -- Link text --> B((Circle))
-    A --> C(Round Rect)
-    B --> D{Rhombus}
-    C --> D 
-        </div>
-    <div class="mermaid">
-        graph TD;
-            sq[Square shape]-->ci((Circle shape)); 
-            od>Odd shape]---|Two line<br>edge comment|ro;
-            od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape];
-            di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);
-            di-->ro2(Rounded square shape);
-            e((Inner circle URL))-->f(,.?!+-*ز);
-            style e red;
-    </div>
 
-    </body>
+<body>
+    <div id="qunit"></div>
+    <div id="qunit-fixture"></div>
+    <div class="mermaid">
+        graph LR
+            A-->B
+            B-->C
+            C-->A
+            D-->C
+    </div>
+</body>
 </html>