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.
Slowly, I learned how to integrate all of these libraries and construct a usable workflow. Here’s my report on all of that.
Setting up gulp to use browserify is easy. You should; however, configure browserify to use the great `coffee-reactify` transformer. Make sure to first `npm install coffee-reactify –save-dev`
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 the that flavor of Coffeescript. To enable this click “View” -> “Syntax” -> “Open all with current extension as…” -> “ReactJS” -> “Coffeescript”. You may need to restart Sublime after this (I needed to).
Unit Testing with Mocha
First you should: `npm install coffee-react –save-dev`
Next you should set up your mocha.opts:
Finally, you’ll need to set up jsdom. You should start by running `npm install jsdom –save-dev`
Then set up a spec_helper like so:
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.
The great thing about this workflow is that it is 100% browser independent. This makes your unit tests, well, more unit test like. You should of course create some sort of integration suite that tests your product in every browser.
If you need to integrate just one more library it is likely someone has already created something, just go explore! 🙂 To see some more code checkout a new project I’m working on: https://github.com/parris/inventoryjs
Leave a Reply
You must be logged in to post a comment.