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 pletely untestable.

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 pletely untestable.

• javascript
• unit-testing
• jasmine
• reactjs

2 Answers 2

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 ponent
• you can use getDOMNode() on your reference for assertions

to spy on methods, before you render the ponents, you can access the methods object through var methods = ComponentName.prototype.__reactAutoBindMap

then (with jasmine) you can say: var methodSpy = spyOn(methods, 'methodName').and.callThrough()

then you can render the ponent: widget = TestUtils.renderIntoDocument(React.createElement(ComponentName, params))