react-kickstart

Counter.js

import React, { Component, PropTypes } from 'react';
import './Counter.css';

export default class Counter extends Component {

  render() {
    const { count, handleClick } = this.props;

    return (
      <div className="Counter">
        <h1 className="h1 h0-responsive caps mt4 mb0 regular counter__text">Count: {count}</h1>
        <p className="h3">Click the button to increment the counter</p>
        <a
          onClick={handleClick}
          className="h3 button button-big mb4 counter__button"
        >
          Increment
        </a>
      </div>
    );
  }
}

Counter.propTypes = {
  count: PropTypes.number.isRequired,
  handleClick: PropTypes.func.isRequired
};

Home.spec.js

/* eslint no-unused-expressions:0 */
import jsdom from 'mocha-jsdom';

import React from 'react/addons';
import Home from '../../src/components/Home';

const { TestUtils } = React.addons;

describe('Home', () => {
  jsdom();

  it('contains "<section>" element', function () {
    const component = TestUtils.renderIntoDocument(<Home />);
    const div = TestUtils.findRenderedDOMComponentWithTag(component, 'section');
    expect(div).to.be.defined;
  });

  describe('increment method', function() {
    it('should increment the counter', function() {
      const component = TestUtils.renderIntoDocument(<Home />);
      const text = TestUtils.findRenderedDOMComponentWithClass(component, 'counter__text');
      const button = TestUtils.findRenderedDOMComponentWithClass(component, 'counter__button');
      TestUtils.Simulate.click(button);
      expect(text.getDOMNode().textContent).to.equal('Count: 1');
    });
  });

});

Hey @vesparny, following your tweet I created a simple solution to the test the increment method.

Considerations:

1. to test the childrens, they have to extend Component.
2. not sure why you want to test the Counter behaviour from the parent (Home), I would incapsulate the increment method into the Counter itself.

Hope this helps :)

not sure why you want to test the Counter behaviour from the parent (Home), I would incapsulate the increment method into the Counter itself

Imagine that the increment method calls an action creator. In that case I want to pass it as a prop in order to maintain Counter as dumb as possible.
Was wondering about how properly test the Counter component in that case.
Probably I have to mock Home? I must create it in some way, because it's actually the one that triggers renders on Counter.

I think the test you created belongs to Counter. Am I wrong?

Guess this is the way to go:
https://facebook.github.io/react/docs/test-utils.html#mockcomponent

@vesparny yes, it belongs to Counter - see (2).

If you want to keep the increment logic separated, you should check the container components.
I still think that Home is not the right place.

To test "dump" components, I usually pass them mock functions as props.
In that way you can easily check if they have been called or not.