(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:
- The Testing Overview section in the official React docs
- A blog post I wrote about unit-testing React or Preact components
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.
- NodeJS 4.x or later is required in order to use the current version of the jsdom library.
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
- 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.
- 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.