parrisneeds.coffee code, music, drinks

ReactJS workflow with Mocha, JSDom, Gulp, Browserify, CoffeeScript and SublimeText

When I first heard about ReactJS, CoffeeScript, Gulp and all these other new libraries I immediately thought “oh god why.” Over the past few months I’ve used each one separately, and learned about why they are cool or useful. Mostly the benefits involved less typing or some performance enhancement.

Whenever you need to integrate some new libraries it often takes time to figure out how they fit together into some usable workflow. Slowly, I learned how to integrate all of these libraries so here’s my report on all of that.

Gulp/Browserify

Myself and a friend set up Eventbrite's RequireJS and Grunt infrastructure. Those tools were the right choice in that stack. I've been using browserify off and on for side projects for the past year and in comparison the simplicity is great.

I did learn that Gulp doesn't really buy you much when using Browserify, due to Browserify's plugin system, however Gulp is still pretty useful. Gulp's piping method seems to be more ideal when making multiple transformations on files.

Err... all the cool kids are using, so I wanted to try it out.

Setting up gulp to use browserify is easy. In order to get coffee script and react working with browserify and gulp you should use the coffee-reactify transformer. Make sure to first npm install coffee-reactify –save-dev

SublimeText

You should just need to install the "Better CoffeeScript" and "ReactJS" packages. They now support the ".cjsx" extension out of the box.

I went ahead and configured all my .coffee files to use that flavor of Coffeescript. To enable this click "View" -> "Syntax" -> "Open all with current extension as..." -> "ReactJS" -> "Coffeescript". You may need to restart Sublime during and after this process.

Unit Testing ReactJS via Mocha

You could use Facebook's new test framework Jest, but honestly I'm just used to Mocha. It's older, and has lots of integrations figured out. That being said you need to do some set up to get React and Mocha playing nicely.

First you should: npm install coffee-react --save-dev, and set it up in your mocha.opts:

Next, you'll need to set up jsdom. You should start by running npm install jsdom --save-dev.

Then go ahead set up a spec_helper and place that in your test folder:

This spec_helper attaches sinon to @ for every test it also exposes document and window as a global which ReactJS needs.

Now let's write some tests:

In this test we stub out some Parse methods, create some fake elements using JSDom, Simulate a click and make sure some text is present. Everything a happy healthy test could ever want. Now with some great syntactic sugar.

Side benefits

  1. Using this system we can actually now also render our code server side! Notice that the Mocha test runs completely server side.
  2. Speed. React is lighting fast!
  3. Reduction in code complexity. I spent 1 day setting up an authentication system. It is rock solid and even has unit tests and other great features.

Conclusions

The great thing about this workflow is that it is 100% browser independent. This makes your unit tests, well, more unit test like. It makes your entire code base more modular and componentized.

Finally, if you need to integrate just one more library it is likely someone has already created something, just go explore :). I have more code snippets of this architecture. You can ask me to post them via Twitter: @parrissays. Also, I'm thinking about a yeoman generator for the next time I want to write an app using this architecture.