-
Open your project (if you're using WebPack, obviously)
-
npm install sinon --save-dev
-
You should now have Sinon in your node modules and listed in your
package.json
file -
In your tests, require Sinon:
var sinon = require('sinon');
orimport * as sinon from 'sinon';
-
You should see a strange error in your console, when you open your testing file. If you google that error and the words 'sinon' and 'webpack' you should see a number of Github issues.
- Evidently, WebPack and Sinonjs have not been playing nicely for some time
- Sinon doesn't export itself correctly when webpacked - or at least, so says the github issue commenters
- We can fix it, we have the technology
-
First, if you don't have it already, you'll need to install imports-loader
npm install imports-loader --save-dev
-
Now open your
webpack.config.js
file and look for themodule:
section. It should look something like this:
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loader: "style!css" },
{ test: /\.scss$/, loader: "style!css!sass" }
]
},
-
Because of the afor mentioned loading issues, you will have to specifically tell webpack how to import sinonjs. Add the following line to the loaders block:
{ test: /sinon\.js$/, loader: "imports-loader?define=>false,require=>false"}
-
Now that we are loading Sinon manually, we have to specify in our tests that we should use the built package. In your
webpack.config.js
add the following property (or update yourresolve
property):
resolve: { alias: { sinon: 'sinon/pkg/sinon.js' } }
- You can find the source of this solution and learn more about the problem in this webpack issue thread