How To Install Sinon.JS In The Browser With Bower



Jasper Valero

Rockstar engineer working hard to dent the universe.


Meeting Vigilance 09th March, 2018

My Manager README 08th February, 2018


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 name jquery
Git endpoint https://github.com/user/package.git
Local folder my/local/folder/
Public Subversion endpoint svn+http://package.googlecode.com/svn/
Private Subversion endpoint svn+ssh://package.googlecode.com/svn/
Shorthand (defaults to GitHub) user/package
URL http://example.com/script.js
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.

%d bloggers like this: