React.js and Jasmine Spies

Using basic test utilities and jasmine for unit testing.

How do you keep track of the function inside a react component?

test.js:

class Test extends React.Component {
  handleClick() {
    // Do something
  }

  render() {
    return (
      <div className="test-class" onClick={this.handleClick}>Test</div>
    );
  }
}

const React = require('react-with-addons');
const RequireJsTest = require('requirejs-test');
const Utils = React.addons.TestUtils;
const Test = require('./test');

describe('test', () => {
  it('should test', function() {
    const test = Utils.renderIntoDocument(<Test/>);
    const el = Utils.findRenderedDOMComponentWithClass(test, 'test-class');
    spyOn(test, 'handleClick');
    Utils.Simulate.click(el);

    expect(test.handleClick).toHaveBeenCalled();
  });
});

      

I am getting the following error:

Expected spy handleClick to have been called. (1)

      

Any ideas? Thank!

+3


source to share


1 answer


Honestly, I haven't tested the apps yet, but I'll try the method (last test in the description block) that I just found in the enzyme readme doc.

I think the prototype method of the component class should be used before handling the component.



spyOn(Test.prototype, 'handleClick');
// and then
expect(Test.prototype.handleClick).toHaveBeenCalled();

      

+1


source







All Articles