Test Driven React/Redux

Which types of tests?

All of them. (but, okay maybe not)

Unit

Integration

Functional

Test First

then write code.

Microsft Research, IBM, Springer Science

Empirical Evidence

Most of your time.

Velocity

=

Speed of adaptation.

Fear is the enemy of velocity

Benefits

To the App
- Reduces bug density
- More modular design
- Reduces complexity
- Quality Assurance
- Aids Continuous Delivery

To Developers
- Less time "tabfreshing"
- Aid design
- Document Features
- Challenges Developer Understanding

RITE Method

5 Questions Every Unit Test Must Answer

Readability

Isolation

Thorough

Explicit

Anatomy of a Unit Test

import assert from 'assert';
import { describe, it } from 'mocha';

// For each unit test you write,
// answer these questions:
describe('What unit aspect are you testing?', () => {
  it('What should the unit do?', () => {
    const actual = 'What is the actual output?';
    const expected = 'What is the expected output?'


    assert.equal(
      actual,
      expected,
      'Can you describe to me what happened here?'
    );
  });
});

React Component Test

import assert from 'assert';
import cheerio from 'cheerio';
import React from 'react';
import { describe, it } from 'mocha';

describe('Components:Todo', () => {
  it('should render the text prop', () => {
    const props = { text: 'foo' };
    const component = <Todo {...props} />;
    const $ = cheerio.load(renderToStaticMarkup(component));

    const actual = $('li').html();
    const expected = 'foo';

    assert.equal(
      actual,
      expected,
      'rendered text prop in <li>'
    );
  });
});

CCR

Component => Context => Result

React Components

- Given props, do components render correct content.
- Given user input, do events trigger the correct handlers.

- Behaviors should be in modules, not in components.
- Components are for displaying data, and responding to user input. All business logic happens elsewhere in modules (which are tested on their own).

Test Utilities

- React TestUtils `react-addons-test-utils`
- DOM/jQuery `cheerio`
- airbnb `enzyme`

TestUtils

- `renderToStaticMarkup`, renders React Component as static HTML.
- `renderIntoDocument`, renders React Component into a "live" dom.
- `scryRenderedDOMComponentsWithTag` Find components by their tag in a "live" React DOM

- New experimental feature for shallow renderting `createRenderer`. Very useful.

Cheerio

Enzyme

- Shallow Rendering
- Full JSDOM Rendering
- Static rendering