Skip to content
This repository has been archived by the owner on Mar 30, 2023. It is now read-only.

Latest commit

 

History

History
50 lines (35 loc) · 2.27 KB

README.md

File metadata and controls

50 lines (35 loc) · 2.27 KB

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.

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.