DeadZen/react-testing

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

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

• Awesome React - Testing React Tutorials - Awesome React is a great collection of links for all aspects of building React apps. The section on testing references a number of useful tutorials.
• Separating visual and data-fetching components
• React.js Conf 2015 - Making your app fast with high-performance components. This talk introduces a policy of separating pure visual components from containers which contain data fetching logic.
• Beyond unit testing
• Dave McCabe - Property Testing for React. This is a great talk on how to do property testing, where tests are fed a stream of random but repeatable and plausible inputs, and the testing framework checks that various invariants that you specify hold for all inputs.