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.
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
- 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.