/react-testing

Slides, notes and sample project from a talk on testing React applications given at the London React meetup group

Primary LanguageJavaScript

React Testability

This is a simple Twitter client project which demonstrates various tools and techniques for writing tests for React components, written as part of a talk (slides, video) at the London React meetup.

It shows the essentials for writing tests for a React application that can be run in Node and the browser, isolating modules under test using shallow rendering and rewire() and using Flummox for testable use of the Flux architecture.

Requirements

  • iojs is required in order to use the current version of the jsdom library. If you don't have iojs, you can edit package.json to refer to an older version of jsdom and use Node.

Building and running

npm install .
make

# run the app
# (you can also use 'webpack-dev-server')
python -m SimpleHTTPServer 8000
open http://localhost:8000

# run tests in the browser
open tests.html

# run tests on the command-line
make test

Libraries and Tools Used

  • React (obviously). v0.13 is used for shallow-rendering support which enables testing of rendering of a single level of the component tree in isolation.
  • Mocha and chai are the basic testing frameworks used, these were chosen as they are popular, polished and well documented.
  • Webpack is used to package the tests for running/debugging in the browser.
  • jsdom is used for testing of rendering DOM components outside of the browser. Version 4.x is used which requires iojs.
  • The Flummox implementation of the Flux architecture is used for fetching data and updating views in response. Flummox avoidance of singletons makes it easy to inject fake/mock actions in unit and integration tests.
  • Rewire is used to show one approach to mocking out React components in tests.
  • fetch and node-fetch provide a uniform API for fetching data in the browser and Node

Recommended Reading & Videos