I'm wondering why my mock doesn't seem to be overriding the onclick method of the Component. Actually it does, except for when I simulate the click.
/** @jsx React.DOM */
//tests/app/modules/autocompletesearchinput-test.js
jest.dontMock('../../../app/modules/AutocompleteSearchInput.jsx');
var React, TestUtils, FluxxorTestUtils, FluxConstructor, realFlux, fakeFlux, MyComponent, Component;
describe('Testing Autocomplete Search Input', function() {
beforeEach(function() {
React = require('react/addons');
TestUtils = React.addons.TestUtils;
FluxxorTestUtils = require('fluxxor-test-utils');
FluxConstructor = require('../../../app/FluxConstructor.js');
realFlux = FluxConstructor();
fakeFlux = FluxxorTestUtils.fakeFlux(realFlux);
fakeFlux.genMocksForStoresAndActions();
// now all store and action methods are mocked for testing
MyComponent = require('../../../app/modules/AutocompleteSearchInput.jsx');
Component = TestUtils.renderIntoDocument(<MyComponent flux={fakeFlux} />);
});
it('when created, component should have AutocompleteSearchInput class', function() {
var div = TestUtils.findRenderedDOMComponentWithClass(
Component, 'AutocompleteSearchInput');
});
it('when mounted and clicked, should call searchBtnClick', function() {
Component.searchBtnClick = jest.genMockFunction();
TestUtils.Simulate.click(Component.refs.searchButton.getDOMNode());
Component.searchBtnClick();
expect(Component.searchBtnClick).toBeCalled();
});
});
For reference, I've been using this: Test a React Component function with Jest
Component.searchBtnClick();must not be here, you just add this line to make the test passed right ? Then, have you writeonClick(camelCase) in you render method (React will ignoreonclick)searchBtnClickis totally there! Its a property inReact.createClass({}).onClickis also camel case as tag attribute. The test passes when I useComponent.searchBtnClick()but when I simulate it. The original method is executed, not the mock. I need the mock, because the original function will throw an exception. Hmm. Thanks.