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(seetests/CheckboxWithLabel-test.js). global.reactModulesToStubcontains a list of modules to replace with stubs (ala Jest).tests/compiler.jsregisters a compiler which transforms JSX/Harmony code to standard ES5 JS and implements the stubbing.tests/blanket-stub-jsx.jsapplies 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.