Big Testing in React

Big Testing in React

Tests come in two sizes: Big and Small. Whereas a small test draws a short perimiter around a single component or group of components and validates the edge cases they contain, a big test incorporates as much of the actual system as possible, making sure that it works in harmony together.

Today, the React ecosystem has many high quality tools for writing small tests. That is, if we have a single component, we can achieve a high degree of certainty that it will work as expected in isolation. Alas, if only our users could use those same components in isolation, we wouldn't need to seek anything further! But they don't do they? They use them on different pages, apps, browsers, devices, and operating systems. They use them with real mice, and real keyboards to talk to real network services.

This talk will show you how to write big tests that measure your React code in a high-fidelity environment that simulates actual user interaction with your entire application. But big doesn't need to mean hard, nor does it need to mean brittle or slow. Done right, big tests are eaiser to write, resilient to change, and plenty fast.


Charles Lowell

September 11, 2017


  1. 7.

    @cowboyd Test Engineering 5 factor tests* What is a Test?

  2. 10.

    @cowboyd Unit Experiment it('simulates click events', () => {

    onButtonClick = sinon.spy();
 const wrapper = shallow((
 <Foo onButtonClick={onButtonClick} />
 expect(onButtonClick)'callCount', 1);
  3. 11.

    @cowboyd Small Hypothesis A component: • with no parent •

    with no children • with no external state management (Redux) • with no external sequencer (saga, observable) • running in nodejs • using a simulated DOM • using simulated events Properly dispatches a handler
  4. 12.

    @cowboyd Big Hypothesis A user on a Microsoft Surface can

    upgrade their the premium subscription with a single click on their settings page.
  5. 17.

    @cowboyd Big Testing is Hard • cumbersome to setup end

    to end • non-repeatable state management • headaches dealing with asynchrony • coordination with external services
  6. 36.

    @cowboyd describe("selecting a package title to add to my holdings",

    function() {
 beforeEach(function() {
 it('reflects the desired state (YES)', function() {