How To Install Sinon.JS In The Browser With Bower



Jasper Valero

Rockstar engineer working hard to dent the universe.


The Magic Of The ES6 Let Keyword 14th May, 2015

An Intro To The Delightful JavaScript ES6 String Templates 26th March, 2015


How To Install Sinon.JS In The Browser With Bower

Posted on .

Sinon.JS + Bower

Just a quick tip for those of you using Bower to install Sinon.JS for unit testing in the browser. Hopefully you’ll avoid scratching your head like I did when things didn’t work out as expected when using the registered Bower package. The solution is sometimes so easy, but it can still take a little time to find.

Installing Using The Registered Sinon.JS Bower Package

If you do a standard:

$ bower install sinon

You will be successful in installing Sinon.JS, however, you will have trouble using it in the browser. This is because the Bower package is not a built version. What you’re given is all the components, not a complete file ready for use in the browser.

So if you’ve already installed it go ahead and uninstall it using:

$ bower uninstall sinon

(Note: Remember to use the –save-dev flag if you used it when installing. This will make sure that you remove the dependency in your bower.json file as well.)

Alternative Bower Package Installation Methods

So to solve the problem we need to install a built version. Remember that Bower install API allows us to install dependencies using any of the following for <package>:

Registered package namejquery
Git endpointhttps://github.com/user/package.git
Local foldermy/local/folder/
Public Subversion endpointsvn+http://package.googlecode.com/svn/
Private Subversion endpointsvn+ssh://package.googlecode.com/svn/
Shorthand (defaults to GitHub)user/package
http://example.com/package.zip (contents will be extracted)
http://example.com/package.tar (contents will be extracted)

Installing Sinon.JS Using Release URLs

Normally if I don’t find the package I need in Bower, I try to use a Git endpoint. Sinon.JS did not seem to offer one for built versions of the file, so I used the URL of the current release (v1.12.2 at the time I wrote this post).

$ bower install http://sinonjs.org/releases/sinon-1.12.2.js

You can replace the version sinon-1.12.2.js with sinon-x.x.x.js where x.x.x = the major.minor.patch of the version you’re wanting to use. For a full listing of versions current and old visit the Sinon.JS download page.

Finding The Path To Use In Your HTML

You can quickly find the path to use in your HTML page using:

$ bower list -p 

That will list out the paths for all of your current installed Bower packages. Copy and paste the path for Sinon.JS (it will probably show up as ‘sinon-1.12.2’) into your HTML page and start unit testing away.

I hope this saves you some time.


Jasper Valero


Rockstar engineer working hard to dent the universe.

View Comments (2) ...