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 to share