Skip to content

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

Notifications You must be signed in to change notification settings

robertknight/react-testing

Repository files navigation

OBSOLETE ADVICE WARNING

(Update on 2020-04-22): This talk was given a long time ago. Tools and best practices have evolved since then. For more up-to-date information, have a look at:

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages