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.
In my earlier post, I said:
Unlike mocha, mocha-webpack doesn’t (yet) support a
--optsflag 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.
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.
As I mentioned in the previous post:
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:
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
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.