How do I access methods in React for unit testing

Question

I'm having an incredibly difficult time unit testing anything with React. The docs on TestUtils are sparse and there's no examples. Google seems to only be giving me a couple results. I'm using Jasmine, but that's not really the part that's giving me grief.

Here's the simplest thing I've tried testing:

var BigButton = React.createClass({
  render: function () {
    return (
      <button className="big-submit" data-color={this.props.color} onClick={this.props.action}>{this.props.text}</button>
    );
  },
  foo: function () {},
  bar: function () {
    this.foo();
  }
});

I have a test with

describe('BigButton', function () {
  describe('render', function () {
    it('creates a button', function () {
      var button = <BigButton />;
      TestUtils.renderIntoDocument(button);
      debugger;
    });
  });
});

My question is how do I access anything meaningful in a React class from the outside? How do I even check if render returns a button HTML element? I know how to use testing spies, but how do I even find the method foo to spy on and how do I call bar? Everything seems to be somehow wrapped up in a way that's completely untestable.

Answer 1

I don't know if you're aware, but Facebook wrote it's own testing library built upon Jasmine: https://facebook.github.io/jest

They have a tutorial for testing react here: https://facebook.github.io/jest/docs/tutorial-react.html

I think this is a good example on how to work with TestUtils, even if you don't want to use jest. The main points are:

• renderIntoDocument() returns a reference to a detached DOM node
• you use helpers like findRenderedDOMComponentWithTag() (see TestUtils) to get references to subnodes out of your component
• you can use getDOMNode() on your reference for assertions