Skip to content

Latest commit

 

History

History
80 lines (57 loc) · 3.14 KB

README.md

File metadata and controls

80 lines (57 loc) · 3.14 KB
Raw

Build Status Coverage Status

mocha-react

Demo of using MochaJS to test ReactJS components (with or without JSX, Harmony, Flux and React-Router).

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 with Babel
  • React Component stubbing (ala Jest's pretty borked "auto-mocking") with Mockery and Sinon
  • 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.reactStub contains a mini React stub that you can use for mocking.
  • tests/TestContext.js provides real Flux tests and simulated ReactRouter.Run,
  • Additionally instrumenting code for test coverage. The results are posted to coveralls.io.

To run the tests using npm test or the mocha command line:

mocha tests/*.js --recursive --reporter spec

About the tests:

All tests are bootstraped with tests/bootstrap.js which provides any globals you may need. Each component is run through lib/TestContext.js to make sure that components are properly routed and initialized with a flux store and props that you define. The test context returns the component and the flux object for tests. Make sure to define these at the individual test level (eg. it) to avoid namespace conflicts.

  • spec1.js Require the TestClass which itself requires the flux store. Check that the component mounts by having a class.

  • spec2.js Render the CheckboxWithLabel class but stub its BigComplicatedComponent require (because it may have an empty store). Then add a prop to the component and assert the existence.

  • spec3.js Most basic component test

  • spec4.js Unit test the Actions of a component, using Sinon to spy on method.

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

See Also: