Geek Answers Handbook

How do I access React methods for unit testing

I have an incredibly difficult time unit testing anything with React. The documents on TestUtils are sparse, and there are no examples. Google seems to give me a couple of results. I use Jasmine, but this is not the part that gives me sadness.

Here is the simplest thing I tried to test:

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 something meaningful in a React class from outside? How can I check if a render returns an HTML element of a button? I know how to use test spies, but how do I find a method footo check and what can I name bar? Everything seems to be somehow wrapped in such a way that it is not tested at all.

+4
2

, , Facebook , Jasmine: https://facebook.imtqy.com/jest

: https://facebook.imtqy.com/jest/docs/tutorial-react.html

, , TestUtils, . :

  • renderIntoDocument() DOM node
  • , findRenderedDOMComponentWithTag() (. TestUtils), .
  • getDOMNode()
+4

, , var methods = ComponentName.prototype.__reactAutoBindMap

( ) : var methodSpy = spyOn(methods, 'methodName').and.callThrough()

: widget = TestUtils.renderIntoDocument(React.createElement(ComponentName, params))

+3

More articles:


All Articles