/mocha-react

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

Primary LanguageJavaScriptApache License 2.0Apache-2.0

Build Status Coverage Status

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.

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 jsdom (see tests/testdom.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.