CODEWITHSUNDEEP
javascriptunit-testingjasminereactjs
Oscar Godson
Oscar Godson

Reputation: 32726

How do I access methods in React for unit testing

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.

Upvotes: 4

Views: 2796

Answers (2)

alex
alex

Reputation: 51

to spy on methods, before you render the components, 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 component: widget = TestUtils.renderIntoDocument(React.createElement(ComponentName, params))

Upvotes: 3

kraf
kraf

Reputation: 1309

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

Upvotes: 4

Related Questions