Slides, notes and sample project from a talk on testing React applications given at the London React meetup group
JavaScript Other
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
data
docs Update talk draft notes Mar 24, 2015
server
src
tests
.babelrc
.editorconfig
.gitignore
.travis.yml
Makefile
README.md
app.css
index.html
package.json
tests.html
webpack.config.js

README.md

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

  • NodeJS 4.x or later is required in order to use the current version of the jsdom library.

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. Update (28/02/16): Shallow rendering support has since improved in React v0.14.7 to include some support for stateful components
  • 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.
  • 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. Update (28/02/16): Flummox still works perfectly well, but Redux has since become the de-facto choice for state management in the React community and it has an even better testability story.
  • Rewire is used to show one approach to mocking out React components in tests. Update (28/02/16): I would probably recommend looking at inject-loader for Webpack or Proxyquire for Browserify instead as these provide a cleaner way to mock JS modules in my view.
  • isomorphic-fetch provides a uniform API for fetching data in the browser and Node.

Recommended Reading & Videos