Skip to content

Instantly share code, notes, and snippets.

  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Adding Sinon to WebPack

Adding Sinon to WebPack

  • 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');

  • 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 --save-dev
  • Now open your webpack.config.js file and look for the module: 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?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.

    • Replace the var sinon = require('sinon'); with var sinon = require('sinon/pkg/sinon'); in your tests
  • You can find the source of this solution and learn more about the problem in this webpack issue thread

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment