mocha-react

Demo of using MochaJS to test a ReactJS component (with JSX and Harmony).

This is a port of the Jest React tutorial. If you'd like to test your React JS components using Mocha instead of Jest, you can use this as a template.

NOTE: If you're client-side React (i.e. code that runs in a browser), I would not recommend this approach. Instead, run your tests in PhantomJS or Selenium using the Mocha test runner. If your code is intended to run in a browser, you'll save yourself lots of headaches by testing it in a browser, too.

Quick start:

npm install
npm test

What this template gets you:

• JSX/Harmony transpilation
• Opt-in module stubbing (ala Jest's "auto-mocking")
• Code coverage via Blanket and coveralls.io

For more background and information on how this works, see this blog post.

Here are the high order bits:

• A fake DOM is provided via mocha-jsdom (see tests/CheckboxWithLabel-test.js).
• global.reactModulesToStub contains a list of modules to replace with stubs (ala Jest).
• tests/compiler.js registers a compiler which transforms JSX/Harmony code to standard ES5 JS and implements the stubbing.
• tests/blanket-stub-jsx.js applies the same transformations, additionally instrumenting code for test coverage. The results are posted to coveralls.io.

To run the tests using the mocha command line:

mocha --compilers .:tests/compiler.js tests/*test.js

Inspiration and guidance came from the Testing React Components blog post and the Khan Academy's React Components Makefile.