I had a really difficult time this morning setting up React + Webpack + Mocha + Chai + Enzyme. All roads with Mocha seem to lead to Karma, which I don’t want to use because I don’t want the complexity of a headless browser. And, all past roads with Mocha but without Karma seem to be pre-Webpack/Babel.

A Mocha + Chai test looks like this:

2016-04-18 at 7.35 AM

Pretty simple, huh? But, to get the test to actually run, I had to…

1. Define my dependencies

2016-04-18 at 7.36 AM

2. Transpile a separate js-tests file

2016-04-18 at 7.38 AM

3. Add a bunch of mumbo jumbo to keep Enzyme from breaking while transpiling

2016-04-18 at 7.39 AM

4. Set up a Grunt task to run Mocha

2016-04-18 at 7.40 AM

5. Voila!

2016-04-18 at 7.41 AM

I’m using Grunt with Webpack because that’s what I copy and pasted from the Feeling RESTful theme (and Grunt is what I’m used to generally).


Hand Built is Daniel Bachhuber, an effective developer with technology leadership you can trust.

How can I help?

Hit me at [email protected] with a short note about what you'd like to do.

My roots are WordPress and publishing, and I love pretty much everything related to web development (architecture, performance, security, etc.). When not working with clients, I also maintain WP-CLI (WordPress' command line interface) and other open source projects.