A few weeks ago, I wrote about the front-end testing workflow we’ve developed at work.

As I mentioned in that post, we’ve been using Mocha and Webpack. Since then the situation has improved a bit, so I thought it worth adding to the previous post with some additional information. In general, the approach I described in that post continues to serve us very well.

Mocha-Webpack Improvments

In my earlier post, I said:

Unlike mocha, mocha-webpack doesn’t (yet) support a --opts flag to specify the file location. A co-worker of mine will be submitting a pull request to rectify that.

The co-worker didn’t have time to get to the pull request, so I ran with it instead. It has since been merged, so now you can put your mocha-webpack.opts file wherever you’d like.

Shortly after writing that post, we discovered some issues with common test setup. We had a specHelper.js file that did some common setup of Chai plugins, like chai-as-promised and sinon-chai.

We were using the --require option to mocha-webpack to include the spec helper file, but that wasn’t working correctly because the spec helper was being required into a different environment than the tests.

I opened an issue on mocha-webpack. After some back and forth with the maintainer, he ultimately came up with a solution that works really well for us. We now use --include instead of --require for our spec helper.

With mocha-webpack 0.3, everything is working exactly as we’d like.

Thanks to Jan-André Zinser for a really useful project, and for helping me with these issues and PRs. In my opinion, mocha-webpack is a really good idea, and the project deserves more popularity than it has received so far. It’s still young, but works really well.

Style Loader

As I mentioned in the previous post:

Webpack’s style-loader also doesn’t work in the command-line environment. … There is an open pull request that makes it possible to use the style-loader in the command-line environment…

The pull request ended up getting rejected. The maintainer suggested using css/locals as mentioned in the last paragraph of the Webpack css-loader documentation:

Note: For prerendering with extract-text-webpack-plugin you should use css-loader/locals instead of style-loader!css-loader in the prerendering bundle. It doesn’t embed CSS but only exports the identifier mappings.

I’d read that documentation several times and never really noticed that line.

I experimented with this approach and found that it worked for us. Here’s our updated Webpack configuration for running Mocha tests:

Webpack Test Configuration
const config = require('./base')

 
config.module.loaders.push({

  test: /\.scss$/,

  loaders: [

    'css/locals?modules&importLoaders=1' +

      '&localIdentName=[path][local]__[hash:base64:5]',

    'sass'

  ]

})

 
config.target = 'node'

 
module.exports = config

As before, we import our base Webpack configuration and then modify it a bit before re-exporting. Note that we’re not using the style-loader at all; instead we’re using css/locals.

We did run into some strangeness, as I outline in the pull request I opened on our react-boilerplate project, but as it stands today, this solution works for us with the configuration above.

I hope this helps you get a good testing workflow going for your Webpack-based applications.