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.

回答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

回答2:

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))

来源：https://stackoverflow.com/questions/26686883/how-do-i-access-methods-in-react-for-unit-testing

标签

javascript

unit-testing

jasmine

reactjs