Testing React Components with React Router

Component.js

var Component = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  propTypes: {
    isCool: React.PropTypes.bool
  },
  getDefaultProps() {
    return {
      isCool: false
    };
  },
  getInitialState() {
    return {
      isLoading: false
    };
  },
  announce() {
    alert("Shout from the rooftops");
  },
  render() {
    var query = this.context.router.getCurrentQuery();
    
    return (
      <div class="component">
        {this.state.isLoading && <div class="loading"></div>}
        {!this.state.isLoading &&
          <div class="supercool">
            {query.name} is cool == {this.props.isCool}
            <button className="announcer" onClick={this.announce}>Tell the world</button>
          </div>
        }
      </div>  
    );
  }
});

module.exports = Component;

Component.test.js

var React = require("react/addons");
var sinon = require("sinon");

var Component = requrie("./component");

var TestUtils = React.addons.TestUtils;

describe("Component", function() {

  beforeEach(function() {
    this.sandbox = sinon.sandbox.create();
    this.container = document.createElement("div");
  });
  
  afterEach(function() {
    this.sandbox.restore();
    React.unmountComponentAtNode(this.container);
  });

  it("displays a loading indicator when loading", function() {
    var comp = React.render(<Component isCool={true} />, this.container);
    // Note use of "refs.stub"
    comp.setState({ isLoading: true });
    var loader = TestUtils.findRenderedDOMComponentWithClass(comp, "loading");
    expect(loader).to.be.ok;
  });
  
  it("displays the body when loaded", function() {
    var comp = React.render(<Component isCool={true} />, this.container);
    comp.refs.stub.setState({ isLoading: false });
    var coolio = TestUtils.findRenderedDOMComponentWithClass(comp, "supercool");
    expect(coolio).to.be.ok;
  });
  
  it("alerts when announcer is clicked", function() {
    var alertStub = this.sandbox.stub(document, "alert");
    var comp = React.render(<Component isCool={true} />, this.container);
    var button = TestUrils.findRenderedDOMComponentWithClass(comp, "announcer");
    TestUtils.Simulate.click(button);
    expect(alertStub.called).to.be.true;
  });

});