Hard lessons learned from setting up React + Webpack + Mocha + Chai + Enzyme

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).

 

Leave a Reply